Skip to content

react/jsx-max-depth false positive #1762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mockdeep opened this issue Apr 7, 2018 · 3 comments
Closed

react/jsx-max-depth false positive #1762

mockdeep opened this issue Apr 7, 2018 · 3 comments

Comments

@mockdeep
Copy link

mockdeep commented Apr 7, 2018

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.

@ljharb
Copy link
Member

ljharb commented Apr 9, 2018

In what context is TABLE_HEADERS used?

@mockdeep
Copy link
Author

mockdeep commented Apr 9, 2018

It looks like this:

render() {
  return (
    <div>
      <table>
        <thead>{TABLE_HEADERS}</thead>
      </table>
    </div>
  );
}

I realized that the 4 instead of 2 bit was because it measures the nesting of all elements in the file, regardless of indirection, but still the count going up is a little odd.

@ljharb
Copy link
Member

ljharb commented Apr 9, 2018

Indeed, the tr there is at the 4th level, and the th's each on the 5th.

I don't think being self-closing matters, or else the lines with two non-self-closing th tags in a row wouldn't have incremented the count - but there's definitely a bug here with the reported count in the error message.

alexzherdev added a commit to alexzherdev/eslint-plugin-react that referenced this issue Jun 14, 2018
alexzherdev added a commit to alexzherdev/eslint-plugin-react that referenced this issue Sep 8, 2018
ljharb pushed a commit to alexzherdev/eslint-plugin-react that referenced this issue Dec 27, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants