[Fix] no-array-index-key: catch .toString and String() usage

Fixes #2813.

Author: RedTn

CHANGELOG.md

@@ -22,6 +22,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-indent`]: Fix indent handling for closing parentheses ([#620][] @stefanbuck])
 * [`prop-types`/`propTypes`]: follow a returned identifier to see if it is JSX ([#1046][] @ljharb)
 * [`no-unused-state`]: TS: support `getDerivedStateFromProps` as an arrow function ([#2061][] @ljharb)
+* [`no-array-index-key`]: catch `.toString` and `String()` usage ([#2813][] @RedTn)
 
 ### Changed
 * [readme] change [`jsx-runtime`] link from branch to sha ([#3160][] @tatsushitoji)
@@ -51,6 +52,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3160]: https://github.com/yannickcr/eslint-plugin-react/pull/3160
 [#3133]: https://github.com/yannickcr/eslint-plugin-react/pull/3133
 [#2921]: https://github.com/yannickcr/eslint-plugin-react/pull/2921
+[#2813]: https://github.com/yannickcr/eslint-plugin-react/pull/2813
 [#2753]: https://github.com/yannickcr/eslint-plugin-react/pull/2753
 [#2061]: https://github.com/yannickcr/eslint-plugin-react/issues/2061
 [#1817]: https://github.com/yannickcr/eslint-plugin-react/issues/1817

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

@@ -159,6 +159,38 @@ module.exports = {
             node,
           });
         });
+
+        return;
+      }
+
+      if (node.type === 'CallExpression'
+          && node.callee
+          && node.callee.type === 'MemberExpression'
+          && node.callee.object
+          && isArrayIndex(node.callee.object)
+          && node.callee.property
+          && node.callee.property.type === 'Identifier'
+          && node.callee.property.name === 'toString'
+      ) {
+        // key={bar.toString()}
+        report(context, messages.noArrayIndex, 'noArrayIndex', {
+          node,
+        });
+        return;
+      }
+
+      if (node.type === 'CallExpression'
+          && node.callee
+          && node.callee.type === 'Identifier'
+          && node.callee.name === 'String'
+          && Array.isArray(node.arguments)
+          && node.arguments.length > 0
+          && isArrayIndex(node.arguments[0])
+      ) {
+        // key={String(bar)}
+        report(context, messages.noArrayIndex, 'noArrayIndex', {
+          node: node.arguments[0],
+        });
       }
     }
 

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

@@ -69,6 +69,21 @@ ruleTester.run('no-array-index-key', rule, {
     {
       code: 'foo.reduce((a, b) => a.concat(<Foo key={b.id} />), [])',
     },
+    {
+      code: 'foo.map((bar, i) => <Foo key={i.baz.toString()} />)',
+    },
+    {
+      code: 'foo.map((bar, i) => <Foo key={i.toString} />)',
+    },
+    {
+      code: 'foo.map((bar, i) => <Foo key={String()} />)',
+    },
+    {
+      code: 'foo.map((bar, i) => <Foo key={String(baz)} />)',
+    },
+    {
+      code: 'foo.reduce((a, b) => a.concat(<Foo key={b.id} />), [])',
+    },
     {
       code: 'foo.reduce((a, b, i) => a.concat(<Foo key={b.id} />), [])',
     },
@@ -251,6 +266,30 @@ ruleTester.run('no-array-index-key', rule, {
       parserOptions: {
         ecmaVersion: 2020,
       },
+    },
+    {
+      code: `
+        foo.map((bar, index) => (
+          <Element key={index.toString()} bar={bar} />
+        ))
+      `,
+      errors: [{ messageId: 'noArrayIndex' }],
+    },
+    {
+      code: `
+        foo.map((bar, index) => (
+          <Element key={String(index)} bar={bar} />
+        ))
+      `,
+      errors: [{ messageId: 'noArrayIndex' }],
+    },
+    {
+      code: `
+        foo.map((bar, index) => (
+          <Element key={index} bar={bar} />
+        ))
+      `,
+      errors: [{ messageId: 'noArrayIndex' }],
     }
   )),
 });