Learn React: Delete Functionality and the Set State Hook
Welcome to the fifth installment of our learning React.js tutorial series (Part 1), (Part 2), (Part 3), (Part 4). Here’s a link to the GitHub Repo. The Read Me has all the instructions needed to get started plus some helpful links for anyone unfamiliar with GitHub.
The article teaches two things: First, you will learn how to pass parameters into functions and delete state directly from the document object model. You will also learn how to create a fully functional to-do list application, using functional components and the use state hook.
Building the Delete Functionality
Once again, we are picking right back up where we left off, there aren’t any necessary updates needed on the code files. The first thing we are going to do is replace the checkbox with a delete button in the TaskComponent and add some space between them by spacing out the {this.props.task} and the closing </span>.
The next thing we are going to do is work on our delete functionality. Since the delete functionality is coming from deleting a specific item, we are going to need to pass the ID parameter to the function.
The logic of the function is pretty simple.
- Make a copy of state since state still can’t be added or deleted directly in state. Rather than performing an operation such as this.state.tasks.splice(parameter, number of indices we are deleting) we need to make the copy.
- Splice.
- Set the state with the spliced copy.
The end result of the function looks like this.
The next thing we’re going to do is pass the function in when returning to the Task component in the App component.
Everything is now already passed in with our task component so we can move back over into our TaskComponent and check out our button. In the button, we pass in our id and our handleDelete function.
The Final TaskComponent will look like this.
Refactoring with Hooks
For this refactor, we’re going to rebuild the App.js component as a functional component and use the Set State hook. My suggestion is to start a new code file and re-clone the original code repo, delete the BasicApp.js, SubmitComponent.js, and TaskComponent.js files. The app component can be completely erased as it will need to be rebuilt for functional components. Don’t forget to run the terminal command npm install!
Hooks are not compatible with class components so we will need to rebuild with functional components. For an intro to the use state hook, here is a great resource.
Using the Set State Hook
The use state hook is made of three parts. I think of it in this way:
Const [incoming state, function to change state ] = useState(original state);
The import statement at the top will need to be adjusted to include importing the hooks that will be used on the page. Since we will no longer be using the React component, we don’t need to import that but we will be using the use state hook so our import will look like this:
Next, we are going to build the component itself as a functional component. This is simply a function that is also a react component.
The next thing we’re going to do is start building out our hooks. Hooks always exist outside of the return statement. For the to-do list, we will need two use state hooks. One will be the creation of a new task variable from the taskbar and the other will be the creation of our state array that we can add and delete new tasks to and from.
These hooks will end up looking like this:
The next thing we’re going to do is set up the text input box and the button. This will be very similar to the original class component. One main difference is that there will be a new characteristic added to the input bar, it will be value. Inside the JSX curly braces, newTask will be added.
We also need to add the OnChange. Inside the input bar, add value = {newTask} and an onChange={event => setNewTask(event.target.value)}.
Just like the class component, let’s also add <h1> tags with the value of newTask inside just to make sure that the newTask from the taskbar is getting saved in the variable.
Once you refresh the page and start typing in the text bar, you’ll be able to see your first real-time example of hook functionality. The text input is taken from the bar and shown on the page in real time just with the simple use State hook.
Next, let’s add the map functionality so that we can add and display the array as soon as our helper function is set up (next step after this). This is also going to look almost identical to the original file but since we are going to keep everything in the App component, it’s a little simpler.
The start of it will look like this:
Now we need to add the helper function. The helper addTask function is going to be the middle piece between grabbing the new task from the taskbar and adding it to the array. The purpose of the add task function is to blend both hooks together then return the newTask variable to its original state of an empty string.
Just like in class components, state can’t be mutated directly so rather than doing something like tasks.push(newTask) we are going to have a function that looks like this:
prevArray is just a placeholder variable and it is going to represent a copy of the previous state. It can be named anything. I chose to name it prevArray as it is easy to understand.
Once we have the function created, we can add the onClick handler to the button. We don’t need to bind with hooks. The function can be written in one of two ways. I have both ways written in vs code. One is commented out and the other is not, but both work.
Lastly, let’s add the delete functionality. For the delete functionality, this is going to look a lot like the delete functionality of the original to-do list. First, we’re going to make a copy of the array because the same rules apply where state can’t be mutated. The next step in this function is to splice the id then we reset the state array with a copy of the state array.
The last piece of this is to add the onClick functionality to the delete bar. The delete bar functionality needs to be set up as an arrow function with the id passed in as a parameter or it will not work.
This is a very basic example of how to set up a to-do list with the use state hook. As you can see, there’s no styling or additional headers or components in either application. Now that the basics are covered, we can move on! Some other topics I am going to cover in the following weeks are how to use styling libraries to style this application, how to add third-party APIs to a React application via ajax, and how to use local storage.