react/no-danger-with-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:

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

Examples

Reported:

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

const summary = <div dangerouslySetInnerHTML={{ __html: post.summary }} children="Loading" />;

const props = { dangerouslySetInnerHTML: { __html: post.body } };

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

const summary = React.createElement("div", props, "Loading");

Not reported:

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

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

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

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