Rules
jsx-key-before-spread
Full Name in @eslint-react/eslint-plugin
@eslint-react/jsx-key-before-spreadFull Name in eslint-plugin-react-x
react-x/jsx-key-before-spreadPresets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Description
Enforces that the 'key' prop is placed before the spread prop in JSX elements.
When using the JSX automatic runtime, key is a special prop 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" />;
// ^^^^^^^
// - The 'key' prop must be placed before any spread props.Passing
<div key="1" {...props} />;
<div key="3" className="" />;
<div className="" key="3" />;Implementation
See Also
no-implicit-key
Preventskeyfrom not being explicitly specified (e.g. spreadingkeyfrom objects).