[Docs] no-array-index-key: add template literal examples

Author: akahoshi1421

CHANGELOG.md

@@ -13,6 +13,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: allow `onLoad` on `body` ([#3923][] @DerekStapleton)
 * [`no-unknown-property`]: allow `closedby` on `dialog` ([#3980][] @ljharb)
 
+### Changed
+* [Docs] [`no-array-index-key`]: add template literal examples ([#3978][] @akahoshi1421)
+
+[#3978]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3978
 [#3980]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3980
 [#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923

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

@@ -19,10 +19,18 @@ things.map((thing, index) => (
   <Hello key={index} />
 ));
 
+things.map((thing, index) => (
+  <Hello key={`hello-${index}`} />
+));
+
 things.map((thing, index) => (
   React.cloneElement(thing, { key: index })
 ));
 
+things.map((thing, index) => (
+  React.cloneElement(thing, { key: `hello-${index}` })
+));
+
 things.forEach((thing, index) => {
   otherThings.push(<Hello key={index} />);
 });
@@ -75,10 +83,18 @@ things.map((thing) => (
   <Hello key={thing.id} />
 ));
 
+things.map((thing) => (
+  <Hello key={`hello-${thing.id}`} />
+));
+
 things.map((thing) => (
   React.cloneElement(thing, { key: thing.id })
 ));
 
+things.map((thing) => (
+  React.cloneElement(thing, { key: `hello-${thing.id}` })
+));
+
 things.forEach((thing) => {
   otherThings.push(<Hello key={thing.id} />);
 });