jsx-key-before-spread

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-key-before-spread

Full Name in eslint-plugin-react-x

react-x/jsx-key-before-spread

Features

🧪

Presets

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 new JSX transform.

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 when using the new JSX transform.

Passing

<div key="1" {...props} />;
<div key="3" className="" />;
<div className="" key="3" />;

Implementation

• Rule Source
• Test Source

Further Reading

• Introducing the New JSX Transform
• Babel Preset React: runtime
• TSConfig: jsx

See Also

• no-implicit-key
  Prevents key from not being explicitly specified (e.g., spreading key from objects).