(react/jsx-key) still warns when wrapping with React.Children.toArray

[hamlim]

The (react/jsx-key) rule seems to still warn for instances wrapped with the React.Children.toArray utility.

This seems to be a bug since React no longer warns about missing keys when wrapping and considers it valid (the toArray utility provides keys to each item automatically)

// React and lint rule both warn
{
  things.map(item => <Thing {...item} />)
}

// lint rule warns but React considers this to be valid
{
  React.Children.toArray(
    things.map(item => <Thing {...item} />)
  )
}

Suggested Solution:

The rule accounts for instances wrapped with React.Children.toArray correctly and does not warn.

Edit:
I incorrectly described this as the no-array-index (as key) rule from this eslint plugin, but it is actually: [eslint] Missing "key" prop for element in iterator (react/jsx-key). Updated the body of the issue plus the title to reflect the correct rule.

[ljharb]

@hamlim @silvenon in which version of React did it stop warning about keys inside React.Children?

[silvenon]

No idea, my guess is that it's worked that way forever (ever since that API was introduced).

[ljharb]

As long as React 0.13 also didn't warn, then I think we're good :-) otherwise we'd need to warn on older React versions.

[hamlim]

Did some quick testing, going back to 0.14.0 it still doesn't warn: https://codesandbox.io/s/92rp6893po

[hamlim]

And it seems like toArray didn't exist on React.Children in 0.13.0.

[MatPayette]

Is this still a thing after 5 years? If not, what's the solution?

[silvenon]

@MatPayette not sure, you can easily check, and if it's still an issue you can try continuing my PR #1591 based on the comments. 🙂