# react/no-unescaped-entities

> Disallow `"` and `'` as plain characters in JSX text

A stray `"` or `'` in JSX text is often a slip. A quote that was meant to end an attribute lands after the tag's `>`, and it shows up on the page.

If you do want the character, write it as an HTML entity, or put the text in a string inside braces. In an editor, the rule suggests the entities to replace it with.

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

Every option, set to its default. The ones that are commented out are unset by default.

```toml bunfig.toml
[lint.rules]
"react/no-unescaped-entities" = ["error", {
  # forbid = <list of strings or objects>,
}]
```

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

## Examples

Reported:

{/* bad {"count": 1} */}
```jsx
const label = <label htmlFor="name">" Your name</label>;
```

{/* bad {"count": 1} */}
```jsx
const note = <p>Don't close this window.</p>;
```

Not reported:

{/* good */}
```jsx
const note = <p>Don&apos;t close this window.</p>;

const hint = <p>{"Don't close this window."}</p>;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `forbid` | `>`, `"`, `'`, `}` | The characters to report. Your list replaces the default list. |

`>` and `}` in JSX text are syntax errors, so you get a parsing error for them, not a report from this rule.

Each item in `forbid` is a single character, or an object with the character and the entities to suggest: `{ "char": "\"", "alternatives": ["&quot;"] }`.

Here only `"` is forbidden. The two quotes are reported and the apostrophe isn't:

{/* bad {"count": 2, "options": [{"forbid": ["\""]}]} */}
```jsx
const note = <p>Don't press "Delete".</p>;
```

## When not to use it

In text with many apostrophes and quotes, the entities make the source hard to read. Leave the rule off there, or shorten `forbid`.