[Fix] jsx-key: catch key errors inside conditional statements

Fixes #3117
jsx-eslint · Jul 4, 2022 · 1948765 · 1948765
1 parent 7a7bb99
commit 1948765
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,10 +10,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`jsx-no-literals`]: properly error on children with noAttributeStrings: true ([#3317][] @TildaDares)
+* [`jsx-key`]: catch key errors inside conditional statements ([#3320][] @TildaDates)
 
 ### Changed
 * [Refactor] [`jsx-indent-props`]: improved readability of the checkNodesIndent function ([#3315][] @caroline223)
 
+[#3320]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3320
 [#3317]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3317
 [#3315]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3315
 [#3311]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3311

diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js
@@ -86,8 +86,28 @@ module.exports = {
       }
     }
 
-    function getReturnStatement(body) {
-      return body.filter((item) => item.type === 'ReturnStatement')[0];
+    function getReturnStatements(node) {
+      const returnStatements = arguments[1] || [];
+      if (node.type === 'IfStatement') {
+        if (node.consequent) {
+          getReturnStatements(node.consequent, returnStatements);
+        }
+        if (node.alternate) {
+          getReturnStatements(node.alternate, returnStatements);
+        }
+      } else {
+        node.body.forEach((item) => {
+          if (item.type === 'IfStatement') {
+            getReturnStatements(item, returnStatements);
+          }
+
+          if (item.type === 'ReturnStatement') {
+            returnStatements.push(item);
+          }
+        });
+      }
+
+      return returnStatements;
     }
 
     function isKeyAfterSpread(attributes) {
@@ -189,10 +209,11 @@ module.exports = {
 
         if (isFn || isArrFn) {
           if (fn.body.type === 'BlockStatement') {
-            const returnStatement = getReturnStatement(fn.body.body);
-            if (returnStatement && returnStatement.argument) {
-              checkIteratorElement(returnStatement.argument);
-            }
+            getReturnStatements(fn.body)
+              .filter((returnStatement) => returnStatement && returnStatement.argument)
+              .forEach((returnStatement) => {
+                checkIteratorElement(returnStatement.argument);
+              });
           }
         }
       },

diff --git a/tests/lib/rules/jsx-key.js b/tests/lib/rules/jsx-key.js
@@ -230,5 +230,57 @@ ruleTester.run('jsx-key', rule, {
         { messageId: 'nonUniqueKeys', line: 5 },
       ],
     },
+    {
+      code: `
+        const Test = () => {
+          const list = [1, 2, 3, 4, 5];
+
+          return (
+            <div>
+              {list.map(item => {
+                if (item < 2) {
+                  return <div>{item}</div>;
+                }
+
+                return <div />;
+              })}
+            </div>
+          );
+        };
+      `,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
+    {
+      code: `
+        const TestO = () => {
+          const list = [1, 2, 3, 4, 5];
+
+          return (
+            <div>
+              {list.map(item => {
+                if (item < 2) {
+                  return <div>{item}</div>;
+                } else if (item < 5) {
+                  return <div></div>
+                }  else {
+                  return <div></div>
+                }
+
+                return <div />;
+              })}
+            </div>
+          );
+        };
+      `,
+      errors: [
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+        { messageId: 'missingIterKey' },
+      ],
+    },
   ]),
 });