Skip to content

react/jsx-max-depth false positive #1762

@mockdeep

Description

@mockdeep

With the react/jsx-max-depth rule enabled with default settings, I get a false positive with the following code:

const TABLE_HEADERS = (
  <tr className='tasks-table__header-row'>
    <th className='tasks-table__header' />
    <th className='tasks-table__header'>{'Title'}</th>
    <th className='tasks-table__header' />
    <th className='tasks-table__header'>{'Estimate'}</th>
    <th className='tasks-table__header' />
    <th className='tasks-table__header'>{'Priority'}</th>
    <th className='tasks-table__header'>{'Timeframe'}</th>
    <th className='tasks-table__header' />
  </tr>
);

It reports:

  12:5  error  Expected the depth of nested jsx elements to be <= 2, but found 4   react/jsx-max-depth
  13:5  error  Expected the depth of nested jsx elements to be <= 2, but found 5   react/jsx-max-depth
  14:5  error  Expected the depth of nested jsx elements to be <= 2, but found 6   react/jsx-max-depth
  15:5  error  Expected the depth of nested jsx elements to be <= 2, but found 7   react/jsx-max-depth
  16:5  error  Expected the depth of nested jsx elements to be <= 2, but found 8   react/jsx-max-depth
  17:5  error  Expected the depth of nested jsx elements to be <= 2, but found 9   react/jsx-max-depth
  18:5  error  Expected the depth of nested jsx elements to be <= 2, but found 10  react/jsx-max-depth
  19:5  error  Expected the depth of nested jsx elements to be <= 2, but found 11  react/jsx-max-depth

It appears that maybe there's a false positive when a tag is self-closing, but I'm also confused as to why it registers 4 instead of 2 on line 12, which maps to the first th tag above.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions