Lists and keys in React: why the index is usually the wrong key

When you render an array with map, each item needs a key prop that is unique among its siblings and stays the same for that item between renders.

const tasks = [
  { id: 'lab-7', text: 'Submit DBMS lab 7', done: true },
  { id: 'os-u3', text: 'Revise OS unit 3', done: false }
];
function TaskList({ items }) {
  return <ul>{items.map(t => <li key={t.id}>{t.done ? '✓ ' : ''}{t.text}</li>)}</ul>;
}
render(<TaskList items={tasks} />);

<ul><li>✓ Submit DBMS lab 7</li><li>Revise OS unit 3</li></ul>

Why not the index?

React matches old and new items by key. With index keys, inserting an item at the top or deleting one shifts every index, so React thinks every item changed. Text inputs and checkboxes inside the items can then show the wrong values, and the list re-renders more than it needs to.

Choosing a key

• Use an id from your data: a database id, a roll number, a slug.
• If the data has no id, create one when the item is created (for example with crypto.randomUUID()), not while rendering.
• The index is acceptable only for a list that never changes order and never has items added or removed in the middle.
• Keys are not passed to the component as a prop. If the child needs the id, pass it separately.