Missing key Prop In React List

ID

javascript.react_list_key

Severity

high

Remediation Complexity

trivial

Remediation Risk

low

Remediation Effort

low

Resource

Reliability

Language

JavaScript

Tags

jsx, react, reliability

Description

Reports JSX elements produced by an iteration callback — arr.map(item ⇒ <Foo />) or the equivalent flatMap — that lack a key prop. React uses key to reconcile sibling elements across renders; without it, React falls back to positional matching and silently produces wrong DOM updates and lost component state when the list reorders.

The rule is structural: a key attribute or a spread that may carry a key (<Foo {…​item} />) is treated as enough.

Rationale

// Bad — sibling list with no key.
function List({ items }) {
  return (
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  );
}

When the list reorders, React diffs by position. Component state, focus, and uncontrolled-input values follow the position, not the data, leading to user-visible glitches that are hard to reproduce locally.

Remediation

Always pass a stable, unique key. Prefer an id from the data; only fall back to the array index when items never reorder:

// Good — stable key from the data.
{items.map(item => <li key={item.id}>{item.name}</li>)}

// Acceptable when the list is append-only and never sorts.
{items.map((item, i) => <li key={i}>{item}</li>)}

If the JSX element is built up dynamically (e.g. cloned from a parent), use React.cloneElement to attach the key without mutating the source.

References