unique key prop ⚛️ React

Warning: Each child in a list should have a unique "key" prop

When rendering a list with .map(), each element needs a stable, unique key so React can track items between renders.

Seen on: React

Meaning

Without keys (or with duplicate/unstable keys like array indexes on reorderable lists), React may reuse the wrong DOM nodes — causing inputs to keep wrong values or animations to glitch.

Common causes

  • Missing key on the outermost element returned from map
  • Duplicate IDs in data
  • Key placed on an inner element instead of the returned one
  • Using index as key on lists that reorder/filter

⚡ Quick fix

  1. Add key={item.id} to the element returned by map
  2. Use stable IDs from your data, not Math.random()
  3. Put the key on the <Fragment key=…> when returning fragments

Detailed fix by platform

React

  1. Example:
    jsx
    {users.map(u => <UserRow key={u.id} user={u} />)}

How to diagnose

  1. Component — Which component renders the list (named in the warning)?
  2. Keys — Unique and stable?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.