Deviopath › React

Undoable Delete

Hard · Timers

Build a list where a delete can be undone for a short time.

Render the items from ITEMS as <li> elements inside a <ul>. Each <li> contains <span className="title"> with the item text and a "Delete" button.

When an item is deleted:

- it disappears from the list immediately

- <div className="undo-bar"> appears, containing <span className="undo-message">Deleted "Team lunch"</span> and an "Undo" button

- "Undo" puts the item back at its old position and hides the bar

- if "Undo" is not clicked within 600ms, the bar disappears and the delete is final

If another item is deleted while the bar is visible, the previous delete becomes final and the bar shows the new item with a fresh 600ms timer.

Next: Pomodoro Timer