no-dangerously-set-innerhtml-with-children

Full Name in eslint-plugin-react-dom

react-dom/no-dangerously-set-innerhtml-with-children

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-dangerously-set-innerhtml-with-children

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule DetailsCopy Anchor Link

When using dangerouslySetInnerHTML, the content of the DOM element is set from the __html property. React does not allow both children and dangerouslySetInnerHTML to be used on the same element; if both are passed, React throws an error — Can only set one of 'children' or 'props.dangerouslySetInnerHTML' — and the component fails to render.

ExamplesCopy Anchor Link

Using dangerouslySetInnerHTML together with childrenCopy Anchor Link

When you pass dangerouslySetInnerHTML and children together, React throws an error and the component does not render at all.

// 🔴 Problem: dangerouslySetInnerHTML and children are used together.
// React throws "Can only set one of 'children' or 'props.dangerouslySetInnerHTML'" and the component fails to render.
function MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: "Hello World" }}>
      <p>Goodbye World</p>
    </div>
  );
}

// 🟢 Recommended: use only dangerouslySetInnerHTML without children.
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello World" }} />;
}

ResourcesCopy Anchor Link

• Rule Source
• Test Source
• Rule Changelog

Further ReadingCopy Anchor Link

• React Docs: dangerouslySetInnerHTML

See AlsoCopy Anchor Link

• react-dom/no-dangerously-set-innerhtml
  Disallows DOM elements from using dangerouslySetInnerHTML.
• react-dom/no-void-elements-with-children
  Disallows children in void DOM elements.