jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.86k stars 2.75k forks source link

[Bug]: checkKeyMustBeforeSpread of react/jsx-key doesn't work when generating array dynamically #3742

Closed gvrnmntdept closed 1 week ago

gvrnmntdept commented 2 months ago

Is there an existing issue for this?

Description Overview

Even though checkKeyMustBeforeSpread works correctly when we use it on statically defined elements, the error is missed for dynamically generated items.

// No Error, Incorrect behavior 
<div>
    {data.map(x => <div {...spread} key={x.id}/>)}
</div>

// Error detected, Expected behavior
<div>
    <div {...spread} key={1}  />
    <div {...spread} key={2}  />
    <div {...spread} key={3}  />
</div>

Expected Behavior

react/jsx-key should report an error when the checkKeyMustBeforeSpread option is enabled and the array of elements is generated dynamically.

eslint-plugin-react version

v7.33.2

eslint version

v8.54.0

node version

v20.10.0