Rules
jsx-key-before-spread
Full Name in eslint-plugin-react-x
react-x/jsx-key-before-spread
Full Name in @eslint-react/eslint-plugin
@eslint-react/jsx-key-before-spread
Presets
x
recommended
recommended-typescript
recommended-type-checked
Description
Enforces that the key
attribute is placed before the spread attribute in JSX elements.
When using the JSX automatic runtime, key
is a special attribute in the JSX transform. See the Babel repl and TypeScript playground.
If the key
prop is before any spread props, it is passed as the key
argument of the _jsx
/ _jsxs
/ _jsxDev
function. But if the key
prop is after spread props, The compiler uses createElement
instead and passes key
as a regular prop.
Examples
Failing
<div {...props} key="2" />;
Passing
<div key="1" {...props} />;
<div key="3" className="" />;
<div className="" key="3" />;
Implementation
See Also
no-implicit-key
Preventskey
from not being explicitly specified (e.g. spreadingkey
from objects).