eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

[Bug]: react/jsx-key rule doesn't detect missing keys in LogicalExpression in return statements

Open yalperg opened this issue 4 months ago • 0 comments

Is there an existing issue for this?

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

Description Overview

The react/jsx-key rule fails to detect missing key props when JSX elements are conditionally rendered using the logical operators within return statements.

Code example

const list = [1, 2, 3, 4, 5, 6];

function Item({ item }) {
  return <p>{item}</p>;
}

function App() {
  return (
    <div>
      {list.map((item) => {
        return item < 4 && <Item item={item} />; // Missing key prop not detected
      })}
    </div>
  );
}

export default App;

Expected Behavior

The rule should detect and report the missing key prop error.

eslint-plugin-react version

v7.37.5

eslint version

v9.28.0

node version

v20.19.1

yalperg avatar Jun 06 '25 21:06 yalperg