fix: detect missing keys in arrays of pushed elements

Author: holoflash

lib/rules/jsx-key.js

@@ -186,6 +186,41 @@ module.exports = {
     )`.replace(/\s/g, '');
     let isWithinChildrenToArray = false;
 
+    /**
+     * Checks if the given node is a push call expression that has JSX Elements or JSX Fragments as arguments,
+     * and the JSX is missing a key prop
+     * @param {ASTNode} node
+     */
+    function checkArrayPushArguments(node) {
+      if (isWithinChildrenToArray) {
+        return;
+      }
+
+      node.arguments.forEach((arg) => {
+        if (
+          arg.type === 'JSXElement'
+          && !hasProp(arg.openingElement.attributes, 'key')
+        ) {
+          report(context, messages.missingArrayKey, 'missingArrayKey', {
+            node: arg,
+          });
+        } else if (checkFragmentShorthand && arg.type === 'JSXFragment') {
+          report(
+            context,
+            messages.missingArrayKeyUsePrag,
+            'missingArrayKeyUsePrag',
+            {
+              node: arg,
+              data: {
+                reactPrag: reactPragma,
+                fragPrag: fragmentPragma,
+              },
+            }
+          );
+        }
+      });
+    }
+
     const seen = new WeakSet();
 
     return {
@@ -197,6 +232,12 @@ module.exports = {
         isWithinChildrenToArray = false;
       },
 
+      'CallExpression[callee.type="MemberExpression"][callee.property.name="push"]'(
+        node
+      ) {
+        checkArrayPushArguments(node);
+      },
+
       'ArrayExpression, JSXElement > JSXElement'(node) {
         if (isWithinChildrenToArray) {
           return;

tests/lib/rules/jsx-key.js

@@ -424,5 +424,19 @@ ruleTester.run('jsx-key', rule, {
       options: [{ checkKeyMustBeforeSpread: true }],
       errors: [{ messageId: 'keyBeforeSpread' }],
     },
+    {
+      code: `
+        const TestCase = () => {
+          const keyLessItems = [];
+
+          for (let i = 0; i < 4; i++) {
+            keyLessItems.push(<li>No Key!</li>);
+          }
+
+          return <ul>{keyLessItems}</ul>;
+        }
+      `,
+      errors: [{ messageId: 'missingArrayKey' }],
+    },
   ]),
 });