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

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const article = <div dangerouslySetInnerHTML={{ __html: post.body }}>Loading</div>;

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

{/* bad {"count": 2} */}
```jsx
const props = { dangerouslySetInnerHTML: { __html: post.body } };

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

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

Not reported:

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

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

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

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