Rules
no-implicit-key
This rule is experimental and may change in the future or be removed. It is not recommended to use it in production code at this time.
Full Name in eslint-plugin-react-x
react-x/no-implicit-key
Full Name in @eslint-react/eslint-plugin
@eslint-react/no-implicit-key
Features
๐งช
Presets
x
recommended
recommended-typescript
recommended-type-checked
Description
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
Failing
import React from "react";
interface MyComponentProps {
items: { id: string; name: string }[];
}
function MyComponent({ items }: MyComponentProps) {
return (
<ul>
{items.map(({ id, name, ...rest }) => {
const props = { key: id, ...rest };
return <li {...props}>{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(({ id, name, ...rest }) => {
return <li key={id} {...rest}>{name}</li>;
})}
</ul>
);
}
Implementation
See Also
jsx-key-before-spread
Enforces that thekey
attribute is placed before the spread attribute in JSX elements.no-missing-key
Prevents missingkey
on items in list rendering.no-duplicate-key
Prevents duplicatekey
on elements in the same array or a list ofchildren
.no-array-index-key
Warns when an arrayindex
is used as akey
prop.