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

Fix #3925

Author: hyeonbinHur

lib/rules/jsx-key.js

@@ -146,7 +146,20 @@ module.exports = {
           getReturnStatements(node.body)
             .filter((returnStatement) => returnStatement && returnStatement.argument)
             .forEach((returnStatement) => {
-              checkIteratorElement(returnStatement.argument);
+              const argument = returnStatement.argument;
+
+              if (argument.type === 'ConditionalExpression') {
+                const shouldCheckNode = (n) => n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
+
+                if (shouldCheckNode(argument.consequent)) {
+                  checkIteratorElement(argument.consequent);
+                }
+                if (shouldCheckNode(argument.alternate)) {
+                  checkIteratorElement(argument.alternate);
+                }
+              } else {
+                checkIteratorElement(argument);
+              }
             });
         }
       }

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' }],