react/jsx-curly-newline

A JSX expression can have a line break after its { and before its }. With a break on one side only, the braces no longer line up and the expression is harder to pick out. By default this rule wants a break on both sides or on neither.

It checks the braces around attribute values and children.

--fix adds or removes the line breaks.

Configure

Off by default. To turn it on:

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

Every option, set to its default:

[lint.rules]
"react/jsx-curly-newline" = ["error", "consistent"] # "consistent" or "never"

Examples

Reported:

const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);

Not reported:

const list = (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
);

const same = (
  <ul>
    {
      items.map(item => <li key={item.id}>{item.name}</li>)
    }
  </ul>
);

Options

Option	What it does
"consistent" (default)	A line break on both sides or on neither.
"never"	No line break after { or before }.

const title = (
  <h1>
    {
      user.name
    }
  </h1>
);

The option can also be an object, with one setting for expressions that fit on one line and one for expressions that span several lines:

Option	Default	What it does
singleline	"consistent"	"consistent", "require" (a break on both sides), or "forbid" (no break).
multiline	"consistent"	The same three values.

const menu = (
  <nav>
    {isOpen && (
      <Menu />
    )}
  </nav>
);

const menu = (
  <nav title={title}>
    {
      isOpen && (
        <Menu />
      )
    }
  </nav>
);

When not to use it

A formatter such as bun fmt or Prettier already decides where these line breaks go.