Merge pull request #332 from silvenon/jsx-key

Fix jsx-key false-positives (fixes #320)

Author: yannickcr

lib/rules/jsx-key.js

@@ -4,32 +4,69 @@
  */
 'use strict';
 
+// var Components = require('../util/Components');
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
 module.exports = function(context) {
 
-  function isKeyProp(decl) {
-    if (decl.type === 'JSXSpreadAttribute') {
-      return false;
+  function hasKeyProp(node) {
+    return node.openingElement.attributes.some(function(decl) {
+      if (decl.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      return (decl.name.name === 'key');
+    });
+  }
+
+  function checkIteratorElement(node) {
+    if (node.type === 'JSXElement' && !hasKeyProp(node)) {
+      context.report(node, 'Missing "key" prop for element in iterator');
     }
-    return (decl.name.name === 'key');
+  }
+
+  function getReturnStatement(body) {
+    return body.filter(function(item) {
+      return item.type === 'ReturnStatement';
+    })[0];
   }
 
   return {
     JSXElement: function(node) {
-      if (node.openingElement.attributes.some(isKeyProp)) {
-        return; // has key prop
+      if (hasKeyProp(node)) {
+        return;
       }
 
       if (node.parent.type === 'ArrayExpression') {
         context.report(node, 'Missing "key" prop for element in array');
       }
+    },
 
-      if (node.parent.type === 'ArrowFunctionExpression') {
-        context.report(node, 'Missing "key" prop for element in iterator');
+    // Array.prototype.map
+    CallExpression: function (node) {
+      if (node.callee.property.name !== 'map') {
+        return;
+      }
+
+      var fn = node.arguments[0];
+      var isFn = fn.type === 'FunctionExpression';
+      var isArrFn = fn.type === 'ArrowFunctionExpression';
+
+      if (isArrFn && fn.body.type === 'JSXElement') {
+        checkIteratorElement(fn.body);
+      }
+
+      if (isFn || isArrFn) {
+        if (fn.body.type === 'BlockStatement') {
+          checkIteratorElement(
+            getReturnStatement(fn.body.body).argument
+          );
+        }
       }
     }
   };
 };
+
+module.exports.schema = [];

tests/lib/rules/jsx-key.js

@@ -27,7 +27,11 @@ ruleTester.run('jsx-key', rule, {
   valid: [
     {code: '<App />;', parserOptions: parserOptions},
     {code: '[<App key={0} />, <App key={1} />];', parserOptions: parserOptions},
-    {code: '[1, 2, 3].map(x => <App key={x} />);', parserOptions: parserOptions}
+    {code: '[1, 2, 3].map(function(x) { return <App key={x} /> });', parserOptions: parserOptions},
+    {code: '[1, 2, 3].map(x => <App key={x} />);', parserOptions: parserOptions},
+    {code: '[1, 2, 3].map(x => { return <App key={x} /> });', parserOptions: parserOptions},
+    {code: '[1, 2, 3].foo(x => <App />);', parserOptions: parserOptions},
+    {code: 'var App = () => <div />;', parserOptions: parserOptions}
   ],
   invalid: [
     {code: '[<App />];',
@@ -42,7 +46,15 @@ ruleTester.run('jsx-key', rule, {
      errors: [{message: 'Missing "key" prop for element in array'}],
      parserOptions: parserOptions},
 
+    {code: '[1, 2 ,3].map(function(x) { return <App /> });',
+     errors: [{message: 'Missing "key" prop for element in iterator'}],
+     parserOptions: parserOptions},
+
     {code: '[1, 2 ,3].map(x => <App />);',
+     errors: [{message: 'Missing "key" prop for element in iterator'}],
+     parserOptions: parserOptions},
+
+    {code: '[1, 2 ,3].map(x => { return <App /> });',
      errors: [{message: 'Missing "key" prop for element in iterator'}],
      parserOptions: parserOptions}
   ]