← React Beginner Questions - Set 5 Q43

What is the significance of the key prop in React lists?

React Beginner Questions - Set 5

Keys let React follow an item through inserts, removals and reordering. This example keeps a text input's state attached to the right item.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { useState } from 'react';

export default function Rows() {
  const [rows, setRows] = useState([
    { id: 'a', name: 'Ana' },
    { id: 'b', name: 'Luis' },
  ]);

  return (
    <>
      <button onClick={() => setRows(r => [{ id: 'z', name: 'New' }, ...r])}>Add on top</button>
      {rows.map(row => (
        <label key={row.id}>
          {row.name}: <input placeholder="note" />
        </label>
      ))}
    </>
  );
}

What to notice

• Prepend an item with `key={index}` and the typed notes jump to the wrong row — the DOM nodes are reused by position.
• With a stable id, React moves the existing node with its state intact.
• Keys only need to be unique among siblings; they never reach the child as a prop.