Retour à la leçon
Mission

Mission : traquer le bug de la case cochée fantôme

Diagnostiquer un bug d'attribution de state causé par key={index} et migrer vers une clé stable.

Contexte

Sur TodoList.jsx, un utilisateur coche la première tâche de sa liste, mais visuellement c'est une tâche plus bas qui apparaît cochée. Le composant utilise {taches.map((tache, index) => <li key={index}><input type="checkbox" defaultChecked={tache.faite} />{tache.texte}</li>)}. Une insertion de nouvelle tâche en tête de liste précède toujours ce genre de bug dans les tickets remontés par les utilisateurs.