# react/jsx-max-depth

> Enforce a maximum depth of nested JSX elements

Deeply nested JSX is hard to follow, and it usually means part of the tree should be its own component. The outermost element has depth 0, its children have depth 1, and so on. By default the rule reports an element deeper than 2.

Elements inside an expression in braces, such as `{more && <li />}` or a `.map()` callback, start again at depth 0.

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

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-max-depth" = ["error", {
  max = 2,
}]
```

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

## Examples

Reported:

{/* bad */}
```jsx
const page = (
  <main>
    <section>
      <ul>
        <li>First</li>
      </ul>
    </section>
  </main>
);
```

Not reported:

{/* good */}
```jsx
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);
```

{/* good */}
```jsx
const page = (
  <main>
    <section>
      <ul>
        {items.map(item => <li key={item.id}>{item.title}</li>)}
        {more && <li>More</li>}
      </ul>
    </section>
  </main>
);
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `max` | `2` | The deepest level that's allowed. |

{/* bad {"options": [{"max": 1}]} */}
```jsx
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);
```

Moving part of the tree to a variable doesn't change its depth:

{/* bad {"options": [{"max": 1}]} */}
```jsx
const section = (
  <section>
    <ItemList />
  </section>
);

const page = <main>{section}</main>;
```