Deviopath › React

Undo / Redo Editor

Hard · Reducers

Build a small text editor with history. Goal: practise useReducer.

Render a <textarea>, an "Undo" button, a "Redo" button and <p className="count">Characters: 0</p>.

- Every change of the textarea is one history entry.

- "Undo" goes back to the previous value, "Redo" re-applies an undone value.

- Typing after an undo clears the redo history.

- "Undo" is disabled when there is nothing to undo, "Redo" is disabled when there is nothing to redo.

- The paragraph always shows the length of the current text.

Hint: keep { past, present, future } in the reducer state.

Next: Restart a Game with key