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>
);
}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.