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

Description

Disallow dangerouslySetInnerHTML and children at the same time.

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

Failing

import React from "react";

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

Passing

import React from "react";

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

Implementation

• Rule Source
• Test Source

See Also

• no-dangerously-set-innerhtml
  Warns when using dangerouslySetInnerHTML.
• no-void-elements-with-children
  Prevents the use of children in void DOM elements.