no-array-index-key not working in cloneElement

[lucapollani]

Following #2083

Hi, I'm currently upgrading my project to React version 16.14.0, so supporting new JSX transform.

I've noticed a change of behavior removing explicit React import.

Considering this snippet of code for example:

Here I've got the "Do not use Array index in keys eslint(react/no-array-index-key)" warning

import React from 'react';
/* [...] */
{tabItems.map((tabItem, tabIndex) =>
	React.cloneElement(tabItem, {
		key: tabIndex
	})
)}

Changing to this:

Here the warning disappears and the code is considered valid.

import { cloneElement } from 'react';
/* [...] */
{tabItems.map((tabItem, tabIndex) =>
	cloneElement(tabItem, {
		key: tabIndex
	})
)}

package.json

"eslint": "~7.32.0",
"eslint-plugin-react": "^7.28.0"

Is this behavior correct?

[ljharb]

The warning is correct - indexes should never be used as keys - the bug is that it doesn’t warn in the second example.

[lucapollani]

Thanks for the feedback @ljharb. Yes I meant that, also to me seemed to be a bug, but preferred to ask to be sure 🙂