react/jsx-props-no-spreading

{...props} passes on everything in the object, including props the element doesn't know. You can't tell from the tag what it receives, and on an HTML element the extras end up as unknown attributes in the page. Naming each prop shows what's passed.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-props-no-spreading" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/jsx-props-no-spreading" = ["error", {
  html = "enforce", # "enforce" or "ignore"
  custom = "enforce", # "enforce" or "ignore"
  explicitSpread = "enforce", # "enforce" or "ignore"
  exceptions = [], # list of strings
}]

Examples#

example.jsx1 problem

function Avatar(props) {
  return <img {...props} />;
}

example.jsxNo problems

function Avatar({ src, alt }) {
  return <img src={src} alt={alt} />;
}

Options#

Option	Default	What it does
`html`	`"enforce"`	`"ignore"` allows spreading on HTML elements such as `<img>`.
`custom`	`"enforce"`	`"ignore"` allows spreading on components such as `<Avatar>`.
`explicitSpread`	`"enforce"`	`"ignore"` allows spreading an object written in place, where every prop is named.
`exceptions`	`[]`	Tag names that get the opposite of what `html` or `custom` says for them.

example.jsxwith { "html": "ignore" }No problems

const field = <input {...inputProps} />;

example.jsxwith { "html": "ignore" }1 problem

const field = <TextField {...inputProps} />;

example.jsxwith { "custom": "ignore" }No problems

const field = <TextField {...inputProps} />;

example.jsxwith { "explicitSpread": "ignore" }No problems

const avatar = <Avatar {...{ src, alt }} />;

An exception allows a tag that's otherwise checked:

example.jsxwith { "exceptions": ["TextField"] }No problems

const field = <TextField {...inputProps} />;

And it checks a tag that's otherwise ignored:

example.jsxwith { "custom": "ignore", "exceptions": ["TextField"] }1 problem

const field = <TextField {...inputProps} />;

When not to use it#

Wrapper components that pass the rest of their props to one element, as in <button {...rest}>, are a common and reasonable pattern. If you write many of them, turn the rule off or list them in exceptions.