no-array-index-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-keyFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Warns when an array index is used as a key prop.
The order of items in a list rendering can change over time if an item is inserted, deleted, or the array is reordered. Indexes as keys often lead to subtle and confusing errors.
Examples
Failing
import React from "react";
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((item, index) => (
// ^^^^^
// - Do not use Array index as 'key'.
<li key={index}>{item.name}</li>
))}
</ul>
);
}Passing
import React from "react";
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((item) => <li key={item.id}>{item.name}</li>)}
</ul>
);
}