Keys Explained

Keys Explained — React Tutorial - HTML5ANDCSS3

function Row({ name }) {
  const [note, setNote] = React.useState("")
  return (
    <li style={{ marginBottom: 4 }}>
      {name}{" "}
      <input
        value={note}
        placeholder="your note"
        onChange={(e) => setNote(e.target.value)}
      />
    </li>
  )
}

function Demo() {
  const [people, setPeople] = React.useState(["Ada", "Grace", "Alan"])

  return (
    <div>
      <button onClick={() => setPeople((p) => p.slice(1))} disabled={people.length === 0}>
        Remove the first person
      </button>
      <button onClick={() => setPeople(["Ada", "Grace", "Alan"])} style={{ marginLeft: 6 }}>
        Reset
      </button>

      <div style={{ display: "flex", gap: 30, marginTop: 10 }}>
        <div>
          <b>key = index (wrong)</b>
          <ul>{people.map((name, i) => <Row key={i} name={name} />)}</ul>
        </div>
        <div>
          <b>key = name (right)</b>
          <ul>{people.map((name) => <Row key={name} name={name} />)}</ul>
        </div>
      </div>

      <p style={{ color: "#64748b" }}>
        Type a note next to Ada in both lists, then remove the first person.
        On the left the note stays behind with Grace. On the right it leaves with Ada.
      </p>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Demo />)

What React uses them for

Where index keys go wrong

Choosing a key

When index keys are fine