# react/jsx-one-expression-per-line

> Require each child of a JSX element to be on its own line

When tags, text and expressions share a line, it's hard to see how many children an element has, and changing one of them shows up in a diff as a change to all of them. This rule puts every child on its own line, along with the opening and closing tags around it.

`--fix` adds the line breaks. Where a space between two children matters, it writes `{' '}` to keep it.

{/* 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-one-expression-per-line" = "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/jsx-one-expression-per-line" = ["error", {
  # allow = <"none", "literal", "single-child" or "non-jsx">,
}]
```

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

## Examples

Reported:

{/* bad */}
```jsx
const greeting = <p>Hello</p>;
```

{/* bad {"count": 2} */}
```jsx
const greeting = (
  <p>
    Hello <b>{name}</b>
  </p>
);
```

Not reported:

{/* good */}
```jsx
const greeting = (
  <p>
    Hello
    {" "}
    <b>
      {name}
    </b>
  </p>
);
```

## Options

`allow` is the only option:

| `allow` | What it does |
| --- | --- |
| `"none"` (default) | Every child goes on its own line. |
| `"literal"` | Allow an element on one line if its only child is text. |
| `"single-child"` | Allow an element on one line if it has only one child, of any kind. |
| `"non-jsx"` | Allow any layout in an element that has no elements as children. |

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

{/* bad {"options": [{"allow": "literal"}]} */}
```jsx
const greeting = <p>{message}</p>;
```

{/* good {"options": [{"allow": "single-child"}]} */}
```jsx
const greeting = <p>{message}</p>;
const wrapped = <p><b /></p>;
```

{/* good {"options": [{"allow": "non-jsx"}]} */}
```jsx
const greeting = <p>Hello {name}, you have {count} messages</p>;
```

## When not to use it

A formatter such as `bun fmt` or Prettier decides where JSX breaks, and it doesn't agree with this rule. Use one or the other.