> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# no-danger-with-children

[Added in v0.5.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.0)
## Configuration

| Preset                            | Configured Value |
| --------------------------------- | ---------------- |
| ✅ reactPlugin.configs.recommended | `"error"`        |


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/no-danger-with-children': 'error',
    },
  },
]);
```

Disallow when a DOM element is using both `children` and `dangerouslySetInnerHTML`.

## Rule Details

This rule helps prevent problems caused by using `children` and
`dangerouslySetInnerHTML` at the same time. React will throw a warning if this
rule is ignored.

Examples of **incorrect** code for this rule:

```javascript
<div dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</div>;

<Hello dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</Hello>;

<div dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />;

React.createElement(
  "div",
  { dangerouslySetInnerHTML: { __html: "HTML" } },
  "Children"
);

React.createElement("div", {
  dangerouslySetInnerHTML: { __html: "HTML" },
  children: "Children",
});
```

Examples of **correct** code for this rule:

```javascript
<div>Children</div>;

<div dangerouslySetInnerHTML={{ __html: "HTML" }} />;

React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" } });

React.createElement("div", {}, "Children");
```

## Original Documentation

- [eslint-plugin-react: no-danger-with-children](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/no-danger-with-children.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/no-danger-with-children.js)