Build a simple to-do app in React (Part 2)
Welcome to building a simple to-do app in React Part 2 — a follow on from Part 1, which you can find here. Just a reminder: you’ll need to have at least some familiarity with HTML5, ES6, and at least some introductory skills in React. In this part, we will continue our simple to-do app from where we left off.
Part 2: Delete an item in the list by clicking directly on it.
The app is broken down into 3 parts:
Part 1: Display a list of default todos or a message when all todos are cleared.
Part 2: Delete an item in the list by clicking directly on it.
Part 3: Add an input field to add new todos to the list.
You can also move to a different part of the article if you would like to or find the completed to-do app on my GitHub repository.
Let’s continue…
Part 2: Delete an item in the list by clicking directly on it.
In our TodoList.js, we will add an onClick listener to the tag responsible for carrying our individual todo content.
Our onClick listener will take a callback function carrying the id of the specific object which we are targeting. Remember that we have already generated that before: todo.id
Explanation:
Here we are saying, that on clicking the <span> tag, something should happen. In this case, delete, which is passed through props from App.js should be executed when our object is clicked on. This is how we execute a callback function to which we need to pass in one or more arguments (todo.id).
Note: You can name the delete prop whatever you like. Just make sure, that you use the exact same name for it in App.js later.
Now, we need to add that prop to our TodoList.js component which is being rendered inside of our App.js file.
What should we pass to our delete prop?
We have to create another function in App.js, which will remove the targeted object for us. Let us call it deleteHandler. Remember that in this function, we have to receive the id from our TodoList.js component, which refers to todo.id. Let us see the function in code, and elaborate further afterwards.
Explanation:
First, we created a deleteHandler function that takes in id as an argument. Then, we aim at removing the targeted object from the list. It can be done in different ways. For example, you can use the spread operator, …, to copy our list of objects, and then the splice() method to remove the targeted object or we can simply use the filter() method which will remove the targeted object from the array and return a new array. This ensures, that we are changing the state immutably.
We have used the latter method in this article. The filter() method will go through our array of objects and only return the objects whose id from our TodoList.js are not equal to the id’s from our objects in our state. Basically, we are returning objects that have not been clicked on.
We also assign the return from our filter() to a constant called todos.
Next, we set the new state of our App.js to the new constant todos we have just created, in the deleteHandler function.
Last but not least, we assign the props delete in our render() method to this.deleteHandler which is a reference to our deleteHandler function.
We can now go to our app in the browser and click on our list of todos to clear them from the browser. Should you delete all of them, a different paragraph will be rendered instead thanks to our ternary statement from Part 1 of the article.
Part 1: Display a list of default todos or a message when all todos are cleared.
Part 3: Add an input field to add new todos to the list.
You can also find the completed to-do app on my GitHub repository here.
Thank you for reading Part 2 of this step by step guide on how to build a to-do app in React. At this point, you should be able to display a list of default todos or a message when all to-dos are cleared and delete an item in the list by clicking directly on it. If you’re stuck, message me in the comments section below and I’ll get back to you. If you’re good to move on, you can view Part 3 of this series.
Please feel free to show this post some appreciation so that other developers are more likely to find it. You can also find the completed to-do app on my GitHub repository.
