Fix: no-array-index-key not working in React.Children methods

docs/rules/no-array-index-key.md

@@ -50,6 +50,14 @@ things.reduce((collection, thing, index) => (
 things.reduceRight((collection, thing, index) => (
   collection.concat(<Hello key={index} />)
 ), []);
+
+React.Children.map(this.props.children, (child, index) => (
+  React.cloneElement(child, { key: index })
+))
+
+Children.forEach(this.props.children, (child, index) => (
+  React.cloneElement(child, { key: index })
+))
 ```
 
 The following patterns are **not** considered warnings:

lib/rules/no-array-index-key.js

@@ -47,6 +47,32 @@ module.exports = {
         && indexParamNames.indexOf(node.name) !== -1;
     }
 
+    function isUsingReactChildren(node) {
+      const callee = node.callee;
+      if (
+        !callee
+        || !callee.property
+        || !callee.object
+      ) {
+        return null;
+      }
+
+      const isReactChildMethod = ['map', 'forEach'].indexOf(callee.property.name) > -1;
+      if (!isReactChildMethod) {
+        return null;
+      }
+
+      const obj = callee.object;
+      if (obj && obj.name === 'Children') {
+        return true;
+      }
+      if (obj && obj.object && obj.object.name === 'React') {
+        return true;
+      }
+
+      return false;
+    }
+
     function getMapIndexParamName(node) {
       const callee = node.callee;
       if (callee.type !== 'MemberExpression') {
@@ -59,16 +85,19 @@ module.exports = {
         return null;
       }
 
-      const firstArg = node.arguments[0];
-      if (!firstArg) {
+      const callbackArg = isUsingReactChildren(node)
+        ? node.arguments[1]
+        : node.arguments[0];
+
+      if (!callbackArg) {
         return null;
       }
 
-      if (!astUtil.isFunctionLikeExpression(firstArg)) {
+      if (!astUtil.isFunctionLikeExpression(callbackArg)) {
         return null;
       }
 
-      const params = firstArg.params;
+      const params = callbackArg.params;
 
       const indexParamPosition = iteratorFunctionsToIndexParamPosition[callee.property.name];
       if (params.length < indexParamPosition + 1) {
@@ -132,24 +161,20 @@ module.exports = {
           && ['createElement', 'cloneElement'].indexOf(node.callee.property.name) !== -1
           && node.arguments.length > 1
         ) {
-          // React.createElement
           if (!indexParamNames.length) {
             return;
           }
-
           const props = node.arguments[1];
 
           if (props.type !== 'ObjectExpression') {
             return;
           }
-
           props.properties.forEach(prop => {
             if (!prop.key || prop.key.name !== 'key') {
               // { ...foo }
               // { foo: bar }
               return;
             }
-
             checkPropValue(prop.value);
           });
 

tests/lib/rules/no-array-index-key.js

@@ -89,6 +89,22 @@ ruleTester.run('no-array-index-key', rule, {
 
     {
       code: 'foo.reduceRight((a, b, i) => a.concat(<Foo key={b.id} />), [])'
+    },
+
+    {
+      code: `
+      React.Children.map(this.props.children, (child, index, arr) => {
+        return React.cloneElement(child, { key: child.id });
+      })
+      `
+    },
+
+    {
+      code: `
+      Children.forEach(this.props.children, (child, index, arr) => {
+        return React.cloneElement(child, { key: child.id });
+      })
+      `
     }
   ],
 
@@ -227,6 +243,43 @@ ruleTester.run('no-array-index-key', rule, {
     {
       code: 'foo.findIndex((bar, i) => { baz.push(React.createElement(\'Foo\', { key: i })); })',
       errors: [{message: 'Do not use Array index in keys'}]
+    },
+
+    {
+      code: `
+      Children.map(this.props.children, (child, index) => {
+        return React.cloneElement(child, { key: index });
+      })
+      `,
+      errors: [{message: 'Do not use Array index in keys'}]
+    },
+
+    {
+      code: `
+      React.Children.map(this.props.children, (child, index) => {
+        return React.cloneElement(child, { key: index });
+      })
+      `,
+      errors: [{message: 'Do not use Array index in keys'}]
+    },
+
+    {
+      code: `
+      Children.forEach(this.props.children, (child, index) => {
+        return React.cloneElement(child, { key: index });
+      })
+      `,
+      errors: [{message: 'Do not use Array index in keys'}]
+    },
+
+    {
+      code: `
+      React.Children.forEach(this.props.children, (child, index) => {
+        return React.cloneElement(child, { key: index });
+      })
+      `,
+      errors: [{message: 'Do not use Array index in keys'}]
     }
+
   ]
 });