# react/no-danger

> Disallow the `dangerouslySetInnerHTML` prop

React escapes the text you render. `dangerouslySetInnerHTML` turns that off and puts a string into the page as HTML. If any part of the string comes from a user, they can run scripts in other users' browsers.

By default the rule only checks DOM elements such as `<div>`, not your own components.

{/* 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" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/no-danger" = ["error", {
  customComponentNames = [], # list of strings
}]
```

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

## Examples

Reported:

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

Not reported:

{/* good */}
```jsx
const comment = <div>{post.body}</div>;

const preview = <Markdown dangerouslySetInnerHTML={{ __html: post.body }} />;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `customComponentNames` | `[]` | Names of components to check as well. A name can be a glob: `"*"` matches every component, and `"Html*"` matches every name that starts with `Html`. |

{/* bad {"options": [{"customComponentNames": ["Markdown", "Html*"]}], "count": 2} */}
```jsx
const preview = <Markdown dangerouslySetInnerHTML={{ __html: post.body }} />;

const footer = <HtmlBlock dangerouslySetInnerHTML={{ __html: site.footer }} />;
```

## When not to use it

Some pages need to render HTML from a trusted or sanitized source, such as a Markdown renderer's output. Disable the rule on those lines, so each use stays visible in review.