no-missing-key
Full Name in eslint-plugin-react-x
react-x/no-missing-keyFull Name in @eslint-react/eslint-plugin
@eslint-react/no-missing-keyFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Prevents missing key on items in list rendering.
React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs.
Examples
Failing
import React from "react";
interface MyComponentProps {
items: { id: number; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((todo) => (
<Todo {...todo} />
{/* ^^^^^^^^^^^^^^^ */}
{/* - Missing 'key' for element when rendering list. */}
))}
</ul>
);
}Passing
import React from "react";
interface MyComponentProps {
items: { id: number; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((todo) => <Todo key={todo.id} {...todo} />)}
</ul>
);
}