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.

Examples

Using dangerouslySetInnerHTML together with children

When you set dangerouslySetInnerHTML, React replaces the element's contents entirely, so any children you provide are silently ignored.

// Problem: dangerouslySetInnerHTML and children are used together.
// The <p> child will not be rendered.
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" }} />;
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

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.