react/no-danger-with-children

Disallow dangerouslySetInnerHTML on an element that also has children

dangerouslySetInnerHTML replaces everything inside an element, so you can't combine it with children. React throws an error when it renders a DOM element that has both.

Children count whether they're between the tags, in a children prop, or the third argument of React.createElement. The rule also follows props that are spread from an object literal in a variable.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/no-danger-with-children" = "error" # or "warn"

Examples#

example.jsx2 problems
const article = <div dangerouslySetInnerHTML={{ __html: post.body }}>Loading</div>;

const summary = <div dangerouslySetInnerHTML={{ __html: post.summary }} children="Loading" />;
example.jsx2 problems
const props = { dangerouslySetInnerHTML: { __html: post.body } };

const article = <div {...props}>Loading</div>;

const summary = React.createElement("div", props, "Loading");
example.jsxNo problems
const article = <div dangerouslySetInnerHTML={{ __html: post.body }} />;

const placeholder = <div>Loading</div>;

A line break between the tags isn't a child:

example.jsxNo problems
const article = (
  <div dangerouslySetInnerHTML={{ __html: post.body }}>
  </div>
);