React Hooks tutorial: Build a to-do list with React Hooks

With the release of React 16.8 in 2019, React Hooks finally become available to use in our production applications. This allows React developers to make functional components stateful. Instead of using a class component to hold stateful logic, we can use functional components.

React Hooks are a powerful tool, so for today’s react hooks tutorial, we will get started with building a to-do list. By the end of this tutorial, you’ll have your first React application with hooks!

It is assumed you already know at least the basics of React. If you’re new to learning React, that’s okay. Check out our React tutorial for beginners before continuing here.

The class component structure describes an instance of an App object that has state that is an array of movies. We render that array of movies by mapping over the state object and returning a single movie for each one in the array.

Stateful functional components are very similar in that they hold state, but they are much simpler. Take the following:

The useState hook is deconstructed into an array with two items in it:

• The variable that holds our state (movies)
• A method that is used to update that state if you need to (setMovies)

Now that you have the basic idea behind the useState React Hook, let’s implement it when creating a To Do List Application!

If you want to add a string or something to make sure your React instance is working on localhost, feel free to do so.

3. Header

Create a new file in the src directory and name it Header.js. Then, Create a presentational component that will display a header identifying the name of your application. Export your Header and import it to App.js. In the empty <div>, add <Header />.

Here is our code so far:

4. Create mock data to test the application

Copy and paste this JSON object into a new file in the src directory named data.json. We are going to work with this data in our project to test to see if things are working properly.

In App.js, add import data from “./data.json”; to your list of imports at the top of the page.

5. Read list of to-dos and display

The next thing we need to do is test our ability to read a set of test data. Let’s use our useState() hook to wire up some local state in App.js.

Basic syntax for useState()

const [ variable, setVariable ] = useState(<initState?>); 

Note: Remember to import React, { useState } from ‘react’; at the top of the page.

Now we need to map over the toDoList and create individual todo components. Create two new files in the src directory called ToDoList.js and ToDo.js.

The ToDoList.js file is the container that holds all of our todos, and ToDo.js is one single row in our To Do List.

Don’t forget to export the ToDoList and import it to App.js. Also, export the ToDo and import it into ToDoList.js. We will need it when we return our individual components in our map function.

Because our state logic is held in App.js (it will become clearer soon why that is), we need to pass our entire toDoList down to our <ToDoList /> component.

In our ToDoList, we will map over the todoList object that was passed down as props to create individual todos. Don’t forget to pass down the individual todo down as props to the ToDo component.

All we want from the ToDo component is the actual task that is on our list. We will also need to make use of the complete property on the todo object to indicate whether or not something is decorated with a strikethrough.

At this moment though, you should have something that resembles the screenshot below. We have a header with some tasks below it!

6. Toggle task completion

Let’s tackle toggling on and off whether or not a task is completed.

Let’s first add a className to our individual To-Do component that will help us with styling. We are going to use a little bit of JavaScript to help us here. Here we add the attribute className and set it equal to a JavaScript expression that asks the question of whether or not the to-do is complete.

Note: Anything in between curly braces when using JSX signals that we are using JavaScript functions.

If our task is completed, we will use the className strike to enforce styling. Otherwise, there won’t be a className. In our index.css, add the following:

Now if you were to take a look at your React application, you should see some of the tasks with a line through it indicating that a project or task has been done.

Next, we have to create a function that will toggle the complete from true to false. This requires going back to App.js since our state resides there.

Creating a toggle function (toggle()) is fairly simple. What we want to do is that when a user clicks on a task, we want to change the state of complete to true if it’s false or vice versa. We will use the second variable in our deconstructed useState array to do this.

For this function, I passed in the id of the item that was clicked. Mapping over the toDoList creates a new array. We can find the id of the current target and then flip the task to complete or not complete depending on the Boolean already passed in.

setToDoList(mapped) is analogous to this.setState({ toDoList: mapped }), which was used when we worked with state in class components.

You can now toggle on and off tasks that are completed!

Delete completed tasks

What are we going to do with all of those crossed-off, completed tasks? Let’s delete them! Create a button that will have an onClick handler that filters out all of the completed items.

This is super similar to the handleToggle function we just did. All we need to do is take the toDoList and filter through it, return all items that are not completed, and then set the filtered array onto toDoList.

Because the filter method returns a new array, we are not in danger of mutating state and can proceed without making a copy of the array before we play with it.

Then, add a button to the end of the ToDoList component and set an onClick to fire the handleFilter function. You want to be certain to add your handleFilter function to App.js and then pass down the function as props to the ToDoList.

8. Add tasks with a form component

The final item on our list is to create a form component that will handle adding tasks to our ToDoList. Create a new file in your src directory and call it ToDoForm.js.

Create a basic form that will allow a user to input a task name, hit enter or click on a button, and have a function fire to add the task. For a form to work correctly we have to keep track of the changes as we go, so logically we have to handle what happens as the input changes.

Form Logic

There are four main things that we need to have to make our forms work:

• Local state (so we will need to employ the useState() hook)
• Our form component with an input value that is assigned to the correct variable
• A function that handles the state’s changes
• A function to handle the form submission

useState to handle user input

Add an import for the useState hook to your React import. Our state here will keep track of any input that the user types into their form. The initial state is set to an empty string since there should be nothing in the form yet.

const [ userInput, setUserInput ] = useState('');

Form Component

Now, create a form component that encapsulates an input and a button. Fairly basic. You can play with style later.

Input.value

Your <input> element should have a value associated with it that matches the name of your state variable (I named mine userInput). The change handler will take the value here and set the state every time it changes.

<input value={userInput} type="text" onChange={handleChange} placeholder="Enter task..."/>

handleChange

This is the function that will handle the local state’s changes. Every time a user types in the input box, the state will change to reflect the most recent input.

const handleChange = (e) => {
       setUserInput(e.currentTarget.value)
   }

handleSubmit

When a user hits ‘Enter’ or clicks the ‘Submit’ button, this function will fire to add the task to the toDoList array.

const handleSubmit = (e) => {
       e.preventDefault();
       addTask(userInput);
       setUserInput(“”);
 
   }

When we use forms, remember to use e.preventDefault() because we don’t want the default action to take place. In this case, it would reload the page and everything changed will go back to how it initially rendered.

Be sure to set userInput back to an empty string after the addTask function has run. This will set the form back to an empty input.

addTask Next is the addTask function. This function goes in App.js since that is where all of our toDoList state is. We need to be able to set the new array on state using setToDoList and we can only do that when the addTask function has access to that state.

 const addTask = (userInput) => {
   let copy = [...toDoList];
   copy = [...copy, { id: toDoList.length + 1, task: userInput, complete: false }];
   setToDoList(copy);
 }

This function takes in userInput that we gathered from our form component’s current state. Make a copy of the toDoList so we don’t directly manipulate the state.

Next, reassign copy to a new array, with copy spread in, and the new list item tagged on the end. Another way this could be written is:

copy.push({id: toDoList.length + 1, task: userInput, complete: false });

Make sure you pass addTask as props down to the ToDoForm.