React's list keys start pointing at the wrong row after a reorder

I reordered my to-do list and now the notes are attached to the wrong tasks.

IntermediateRead 4 minDoing: under 45 minutes6 steps

▶ Start

What you'll have at the end

A reordered list where each row's saved input stays attached to its own item

Before you start

You need

A list of items built by mapping an array into rows, where each row holds its own local state, such as a note field or a checked box, that has to stay attached to the same item no matter where that item ends up in the list.

Not covered

Windowed or virtualized lists that only keep a handful of rows mounted at once need a different, library-specific way of keeping row identity stable, which this recipe does not cover.

Leans on

6 steps

Where to go next

Turn repeated markup into one reusable component with props

if each row is still repeated markup instead of its own component, pull that apart first: giving a row component a stable key is far easier once it already takes props instead of duplicated code.

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook