The Scenario
A small React to-do app has a bug: when a user deletes a task, the wrong task is sometimes removed. The root cause is that list items use array index as a React key instead of a stable ID. A real junior developer fix would not just swap the key, it would also reason about why this bug appeared.
The Brief
You do not need a real repo to complete this task. Work from the following snippet and write a fixed version plus an explanation.
Deliverables
- A corrected code snippet (paste as a Markdown code block)
- A 3 to 5 sentence explanation of the root cause, written so a non-technical stakeholder could follow
- One additional safeguard (a test, a lint rule, or a code review checklist item) that would prevent a similar bug in future
Submission Guidance
Buggy code: ```jsx {tasks.map((task, index) => ( <li key={index} onClick={() => deleteTask(index)}>{task.title}</li> ))} ``` Assume `deleteTask(id)` exists and takes a task id.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.