Learn React Hooks

Implementing Undo/Redo in our post editor

In the simple post editor of our blog app, we have a textarea where we can write the contents of a blog post. We are now going to implement the useUndo Hook there, so that we can undo/redo any changes that we made to the text:

1. First, we have to install the use-undo library via npm:

> npm install --save use-undo

2. Then, we import the useUndo Hook from the library in src/post/CreatePost.js:

import useUndo from 'use-undo'

3. Next, we define the Undo Hook by replacing the current useInput Hook. Remove the following line of code:

    const { value: content, bindToInput: bindContent } = useInput('')

Replace it with the useUndo Hook, as follows. We set the default state to ''. We also save the state to undoContent ...