Keys and List Reconciliation
Spot the key-related bug that defeats React's reconciliation for a dynamic list.
Codejavascript
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={Math.random()}>
<input defaultValue={todo.text} />
</li>
))}
</ul>
);
}What is the bug in this code, and why does it hurt reconciliation?