react/jsx-curly-brace-presence

<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.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-curly-brace-presence" = "error" # or "warn"

Every option, set to its default:

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"
}]

Examples#

example.jsx4 problems

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

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

example.jsxNo problems

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 &. It also leaves a child alone if it starts or ends with white space, has <, >, {, or }, or sits next to another {} expression.

example.jsxNo problems

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.

example.jsxwith "always"2 problems

const button = <Button label="Save">Save</Button>;

example.jsxwith "always"No problems

const button = <Button label={"Save"}>{"Save"}</Button>;

example.jsxwith { "children": "ignore" }No problems

const greeting = <p>{"Hello"}</p>;

example.jsxwith { "propElementValues": "always" }1 problem

const page = <Layout header=<Header /> />;

example.jsxwith { "propElementValues": "always" }No problems

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:

example.jsxwith { "propElementValues": "never" }2 problems

const page = <Layout header={<Header />} />;

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