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 Details

When using dangerouslySetInnerHTML, the content of the DOM element is set from the __html property. The content of the DOM element is completely replaced, so the children will not be rendered as expected.

Common Violations

Invalid

function MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: "Hello World" }}>
      <p>Goodbye World</p>
    </div>
  );
}

Valid

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello World" }} />;
}

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: dangerouslySetInnerHTML

See Also

• 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.