This todo list lets you add and delete items. But when you delete an item from the middle of the list, strange things happen — wrong items disappear, or the list gets jumbled.
Symptoms
- Adding items works fine
- Deleting the last item works
- Deleting from the middle causes wrong items to be removed
- React may show a warning about keys in the console
Your Task
Fix the list rendering so that:
- Each item can be correctly deleted
- The list updates predictably
- No React key warnings
Think about it: How does React identify which item is which in a list?