jsx/no-spreading-key

Rule category

Suspicious.

What it does

Disallows spreading key prop from objects.

Why is this bad?

This makes it hard to see if the key was passed correctly to the element or where it came from.

And it's also be proposed to be deprecated is this RFC: Deprecate spreading key from objects (opens in a new tab)

Examples

This rule aims to prevent spreading key from objects.

Failing

function List({ items }) {
  return (
    <ul>
      {items.map((item) => <li {...{ key: item.id }}>{item.name}</li>)}
    </ul>
  );
}

Passing

function List({ items }) {
  return (
    <ul>
      {items.map((item) => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}