no-implicit-key
Full Name in eslint-plugin-react-x
react-x/no-implicit-keyFull Name in @eslint-react/eslint-plugin
@eslint-react/no-implicit-keyFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Prevents key from not being explicitly specified (e.g. spreading key from objects).
This makes it hard to see if the key was passed correctly to the element or where it came from.
And it’s also be proposed to be deprecated is this RFC: Deprecate spreading key from objects
Examples
This rule aims to prevent spreading key from objects.
Failing
import React from "react";
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map((item) => {
const props = { key: item.id };
return <li {...props}>{item.name}</li>;
// ^^^^^^^^^^
// - Do not use implicit 'key' props.
})}
</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>
);
}