---
title: "react/no-danger"
description: "Disallow the `dangerouslySetInnerHTML` prop"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "react"
aliases: []
kind: null
category: "restriction"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

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.