no-key-after-spread

Full Name in eslint-plugin-react-jsx

react-jsx/no-key-after-spread

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-no-key-after-spread

Presets

jsx recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

When using the JSX automatic runtime, key is a special prop in the JSX transform. See the Babel REPL and the 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

Using key after spread props

// Problem: The 'key' prop must be placed before any spread props when using the new JSX transform.
<div {...props} key="2" />;

Using key before or without spread props

// Recommended: 'key' placed before spread props
<div key="1" {...props} />;

// Recommended: 'key' without spread props
<div key="3" className="" />;

// OK: 'key' can also appear after regular props
<div className="" key="3" />;

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: New JSX Transform
• Babel Preset React: runtime
• TSConfig: jsx

See Also

• react-x/no-implicit-key
  Prevents implicitly passing the key prop to components.