Skip to content

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

Closed
@gvrnmntdept

Description

@gvrnmntdept

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

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

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