no-array-index-key
Disallows using an item's index in the array as its key.
Full Name in eslint-plugin-react-x
react-x/no-array-index-keyFull Name in @eslint-react/eslint-plugin
@eslint-react/no-array-index-keyPresets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
The order of items in list rendering can change over time if an item is inserted, deleted, or the array is reordered. Using indexes as keys often leads to subtle, confusing errors.
Examples
Rendering a list with stable identities
When your data items have a unique identifier, use it as the key so React can correctly track each element across reorders, insertions, and deletions.
// Problem: Using the array index as a key causes state issues when sorting, adding, or removing items
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((item, index) => (
// ^^^ Do not use an item's index in the array as its key.
<li key={index}>{item.name}</li>
))}
</ul>
);
}// Recommended: Use the data's own unique identifier as the key
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((item) => <li key={item.id}>{item.name}</li>)}
</ul>
);
}Rendering nested lists
When rendering nested lists, both the outer and inner items need stable keys. Using the item's own identifier ensures React can correctly track elements at every level.
// Recommended: Use stable identifiers for both outer and inner list items
interface Recipe {
id: string;
name: string;
ingredients: string[];
}
function RecipeList({ recipes }: { recipes: Recipe[] }) {
return (
<div>
<h1>Recipes</h1>
{recipes.map((recipe) => (
<div key={recipe.id}>
<h2>{recipe.name}</h2>
<ul>
{recipe.ingredients.map((ingredient) => (
<li key={ingredient}>{ingredient}</li>
))}
</ul>
</div>
))}
</div>
);
}Rendering multiple elements per list item
When each list item needs to render multiple elements, use Fragment with a stable key so React can track the group without adding extra DOM nodes.
// Recommended: Use Fragment with a stable key for multi-element items
import { Fragment } from "react";
interface Person {
id: string;
name: string;
bio: string;
}
function List({ people }: { people: Person[] }) {
const listItems = people.map((person) => (
<Fragment key={person.id}>
<h1>{person.name}</h1>
<p>{person.bio}</p>
</Fragment>
));
return <ul>{listItems}</ul>;
}Versions
Resources
Further Reading
See Also
react-x/no-duplicate-key
Prevents duplicatekeyprops on sibling elements when rendering lists.react-x/no-implicit-key
Prevents implicitly passing thekeyprop to components.react-x/no-missing-key
Disallows missingkeyon items in list rendering.