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

## 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,
}]
```

## Examples

Reported:

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

Not reported:

```jsx
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);
```

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

```jsx
const page = (
  <main>
    <section>
      <ItemList />
    </section>
  </main>
);
```

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

```jsx
const section = (
  <section>
    <ItemList />
  </section>
);

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