[Fix] jsx-key: detect missing keys in return statement with ternary operator

Fixes jsx-eslint#3925

Author: ljharb

CHANGELOG.md

@@ -16,6 +16,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: allow `closedby` on `dialog` ([#3980][] @ljharb)
 * [`no-unknown-property`]: add `onScrollEnd` and `onScrollEndCapture` events as known properties ([#3958][] @xfeeefeee)
 * Remove extra space from CLI warning ([#3942][] @junaidkbr)
+* [`jsx-key`]: detect missing keys in return statement with ternary operator ([#3928][] @hyeonbinHur)
 
 ### Changed
 * [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
@@ -26,6 +27,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3943]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3943
 [#3942]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3942
 [#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
+[#3928]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3928
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923
 [#3441]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3441
 

lib/rules/jsx-key.js

@@ -33,6 +33,8 @@ const messages = {
   nonUniqueKeys: '`key` prop must be unique',
 };
 
+const shouldCheckNode = (n) => n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -146,7 +148,18 @@ module.exports = {
           getReturnStatements(node.body)
             .filter((returnStatement) => returnStatement && returnStatement.argument)
             .forEach((returnStatement) => {
-              checkIteratorElement(returnStatement.argument);
+              const argument = returnStatement.argument;
+
+              if (argument.type === 'ConditionalExpression') {
+                if (shouldCheckNode(argument.consequent)) {
+                  checkIteratorElement(argument.consequent);
+                }
+                if (shouldCheckNode(argument.alternate)) {
+                  checkIteratorElement(argument.alternate);
+                }
+              } else {
+                checkIteratorElement(argument);
+              }
             });
         }
       }
@@ -159,7 +172,6 @@ module.exports = {
      */
     function checkArrowFunctionWithJSX(node) {
       const isArrFn = node && node.type === 'ArrowFunctionExpression';
-      const shouldCheckNode = (n) => n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
       if (isArrFn && shouldCheckNode(node.body)) {
         checkIteratorElement(node.body);
       }

tests/lib/rules/jsx-key.js

@@ -36,6 +36,12 @@ const settings = {
 const ruleTester = new RuleTester({ parserOptions });
 ruleTester.run('jsx-key', rule, {
   valid: parsers.all([
+    {
+      code: `
+        [1, 2, 3].map((item) => {
+         return item === 'bar' ? <div key={item}>{item}</div> : <span key={item}>{item}</span>;
+        })`,
+    },
     { code: 'fn()' },
     { code: '[1, 2, 3].map(function () {})' },
     { code: '<App />;' },
@@ -207,6 +213,57 @@ ruleTester.run('jsx-key', rule, {
     },
   ]),
   invalid: parsers.all([
+    {
+      code: `
+        [1, 2, 3].map((item) => {
+          return item === 'bar' ? <div>{item}</div> : <span>{item}</span>;
+        })`,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
+    {
+      code: `
+        [1, 2, 3].map(function(item) {
+          return item === 'bar' ? <div>{item}</div> : <span>{item}</span>;
+        })`,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
+    {
+      code: `
+        Array.from([1, 2, 3], (item) => {
+          return item === 'bar' ? <div>{item}</div> : <span>{item}</span>;
+        })`,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
+    {
+      code: `
+        import { Fragment } from 'react';
+
+        const ITEMS = ['bar', 'foo'];
+
+        export default function BugIssue() {
+          return (
+            <Fragment>
+              {ITEMS.map((item) => {
+                return item === 'bar' ? <div>{item}</div> : <span>{item}</span>;
+              })}
+            </Fragment>
+          );
+        }
+      `,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
     {
       code: '[<App />];',
       errors: [{ messageId: 'missingArrayKey' }],