#jsx-max-depth

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-max-depth': 'error',
    },
  },
]);

Enforce JSX maximum depth.

#Rule Details

This rule validates a specific depth for JSX elements.

Examples of incorrect code for this rule:

<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

#Rule Options

It takes one option object with a positive max integer (default: 2).

{ "react/jsx-max-depth": ["error", { "max": 2 }] }

Examples of incorrect code for this rule with { "max": 1 }:

{ "react/jsx-max-depth": ["error", { "max": 1 }] }

<App>
  <Foo>
    <Bar />
  </Foo>
</App>

{ "react/jsx-max-depth": ["error", { "max": 1 }] }

const foobar = (
  <Foo>
    <Bar />
  </Foo>
);
<App>{foobar}</App>;

Examples of incorrect code for this rule with { "max": 2 }:

{ "react/jsx-max-depth": ["error", { "max": 2 }] }

<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

Examples of correct code for this rule with { "max": 1 }:

{ "react/jsx-max-depth": ["error", { "max": 1 }] }

<App>
  <Hello />
</App>

Examples of correct code for this rule with { "max": 2 }:

{ "react/jsx-max-depth": ["error", { "max": 2 }] }

<App>
  <Foo>
    <Bar />
  </Foo>
</App>

Examples of correct code for this rule with { "max": 3 }:

{ "react/jsx-max-depth": ["error", { "max": 3 }] }

<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

#When Not To Use It

If you are not using JSX then you can disable this rule.

#Original Documentation

• eslint-plugin-react/docs/rules/jsx-max-depth.md