# react/jsx-curly-brace-presence

> Disallow curly braces around plain strings in JSX, or require them

`<Button label={"Save"} />` and `<Button label="Save" />` mean the same thing, and so do `<p>{"Hello"}</p>` and `<p>Hello</p>`. The braces add noise. By default this rule reports them around a plain string, around a template literal without `${}`, and around a child element.

`--fix` removes or adds the braces.

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

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-curly-brace-presence" = ["error", {
  props = "never", # "always", "never" or "ignore"
  children = "never", # "always", "never" or "ignore"
  propElementValues = "ignore", # "always", "never" or "ignore"
}]
```

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

## Examples

Reported:

{/* bad {"count": 4} */}
```jsx
const button = <Button label={"Save"} title={`Save`}>{"Save"}</Button>;

const panel = <Panel>{<Spinner />}</Panel>;
```

Not reported:

{/* good */}
```jsx
const button = <Button label="Save" title="Save">Save</Button>;

const panel = <Panel><Spinner /></Panel>;
```

Braces that are needed stay. The rule leaves a string alone if it has a backslash or an entity such as `&amp;`. It also leaves a child alone if it starts or ends with white space, has `<`, `>`, `{`, or `}`, or sits next to another `{}` expression.

{/* good */}
```jsx
const kept = (
  <ul title={`Hello ${name}`}>
    <li>{" "}</li>
    <li>{"Total: "}</li>
    <li>{"a\tb"}</li>
    <li>{"&amp;"}</li>
    <li>{"{braces} and <tags>"}</li>
    <li>{"Hello"}{name}</li>
  </ul>
);
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `props` | `"never"` | Braces around a string that's an attribute's value. |
| `children` | `"never"` | Braces around a string or an element that's a child. |
| `propElementValues` | `"ignore"` | Braces around an element that's an attribute's value. |

Each takes `"never"` (report the braces), `"always"` (report a string without braces), or `"ignore"` (don't check). If you pass one of these words instead of the object, it sets both `props` and `children`.

{/* bad {"options": ["always"], "count": 2} */}
```jsx
const button = <Button label="Save">Save</Button>;
```

{/* good {"options": ["always"]} */}
```jsx
const button = <Button label={"Save"}>{"Save"}</Button>;
```

{/* good {"options": [{"children": "ignore"}]} */}
```jsx
const greeting = <p>{"Hello"}</p>;
```

{/* bad {"options": [{"propElementValues": "always"}]} */}
```jsx
const page = <Layout header=<Header /> />;
```

{/* good {"options": [{"propElementValues": "always"}]} */}
```jsx
const page = <Layout header={<Header />} />;
```

Don't use `propElementValues: "never"`. It reports the element with braces and also the element without them, so nothing you write passes:

{/* bad {"options": [{"propElementValues": "never"}], "count": 2} */}
```jsx
const page = <Layout header={<Header />} />;

const other = <Layout header=<Header /> />;
```