// Why did my checkbox move?
// Teaching excerpts; see the explanation and boundaries on the episode page.

// Index keys identify the position.
items.map((item, index) => (
  <Row key={index} item={item} />
))

// Exactly. The state lives in each Row.
function Row({ item }) {
  const [checked, setChecked] =
    useState(false);
  // Checkbox uses checked.
  // Label uses item.name.
}

// Use the item ID. Keep its identity.
items.map(item => (
  <Row key={item.id} item={item} />
))