#047Array Index as key Breaks Reconciliation
react.easyREACT
1function TodoList({ todos }) {
2 return (
3 <ul>
4 {todos.map((todo, index) => (
5 <TodoItem
6 key={index}
7 text={todo.text}
8 done={todo.done}
9 />
10 ))}
11 </ul>
12 );
13}
14// After sorting todos, React reuses item at index 0 for the new first item
15// — input focus, animation state, and uncontrolled state transfer to wrong item
no lines flagged
#047PracticeEasy10 min · 50 XP
Array Index as key Breaks Reconciliation
A sortable list reuses the wrong component instances after reordering because of a bad key prop.
Flagged lines
No lines flagged yet
What's wrong?
Flag a line or write a note to submit.