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

Rule Source
Test Source