fix jsx-key bug - eslint not catching jsx-key error inside conditional statements

Author: TildaDares

lib/rules/jsx-key.js

@@ -86,8 +86,25 @@ 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 {
+        const body = node.body;
+        body.forEach((item) => {
+          if (item.type === 'IfStatement') {
+            getReturnStatements(item, returnStatements);
+          }
+
+          if (item.type === 'ReturnStatement') {
+            returnStatements.push(item);
+          }
+        });
+      }
+
+      return returnStatements;
     }
 
     function isKeyAfterSpread(attributes) {
@@ -189,10 +206,12 @@ module.exports = {
 
         if (isFn || isArrFn) {
           if (fn.body.type === 'BlockStatement') {
-            const returnStatement = getReturnStatement(fn.body.body);
-            if (returnStatement && returnStatement.argument) {
-              checkIteratorElement(returnStatement.argument);
-            }
+            const returnStatements = getReturnStatements(fn.body);
+            returnStatements.forEach((returnStatement) => {
+              if (returnStatement && returnStatement.argument) {
+                checkIteratorElement(returnStatement.argument);
+              }
+            });
           }
         }
       },

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