React Missing Key Prop Warning

Use a unique identifier from your data as the key.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]

// ✅ Use unique id from data
return (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
)

Only use array index for static lists that don't change order.

// ✅ Static list: index is fine
const colors = ["red", "green", "blue"]
return (
  <div>
    {colors.map((color, i) => (
      <span key={i}>{color}</span>
    ))}
  </div>
)

// ❌ Dynamic list: index causes bugs
// When items are added/removed/reordered, indices shift

Create stable identifiers using a combination of properties.

const items = [
  { name: "Apple", type: "fruit" },
  { name: "Carrot", type: "vegetable" }
]

// Create composite key if no unique id
return items.map(item => (
  <li key={`${item.type}-${item.name}`}>
    {item.name}
  </li>
))