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, and to better understand them, we will get started with building a to-do list, specifically focusing on the useState Hook.

Note: 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.

Overview of React Hooks#

In React, Hooks are functions that allow you to hook into React state and lifecycle features from function components. This allows you to use React without classes.

When you take an initial look at the React Hooks documentation, you’ll see that there are several Hooks that we can use for our applications. You can even create your own. Some of the popular ones include:

• useState: Adds state to functional components.

• useEffect: Performs side effects in function components.

• useContext: Accepts a context object and returns the current context value.

• useCallback: Returns a memoized callback.

Benefits of using Hooks#

• Isolating stateful logic, making it easier to test

• Sharing stateful logic without rendering props or higher-order components

• Separating your app’s concerns based on logic

• Avoiding ES6 classes

The only Hook we will need for this particular to-do list project is the useState Hook. This Hook replaces the need for a state object in a class component structure.

Class component in React #

When looking at older React legacy code, most likely, you will see something like the following:

The class component structure describes an instance of an App object that has a state that is an array of movies. We render that array of movies by mapping over the state object and returning every movie within its own <div> element.

Functional component in React #

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

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)

The useState Hook not only creates and initializes a local state movies within the App component, but also ensures that the App component will re-render whenever setMovies is called. This way, any changes to movies will immediately appear in the component’s output.

Now that you have the basic idea behind the useState React Hook, let’s see how to use it when creating a To-Do list application.

React To-Do List: Project Prompt#

Our goal is to create a To-Do List UI with the following components:

1. Header: Labels the To-Do List.

2. To-Do Items List: Displays each to-do item. We will also create two additional capabilities for the list:

   1. Ability to strikethrough a task that indicates completion.

   2. Remove all completed tasks from the list with a button click.

3. Form: Adds new to-do task item to the list.

Let's start with a step-by-step guide on how to create a To-Do list in React using the useState Hook.

Step 1: Create a React application#

The first step is to create a React application. You can use either Yarn or npm to set up your React project:

Navigate into the todo-list folder and start the application. Your project should now be running on http://localhost:3000.

Step 2: Set up the App component#

Navigate to the App.js file and clear the existing content inside the <div> tags. We won’t need any of the pre-populated code. The App.js file should look something like this:

Step 3: Create the Header component#

A header enhances the application's UI by clearly indicating its purpose. We'll create a reusable Header component.

Create a new file, Header.js, in the src directory. Inside this file, create a functional component, Header, that returns JSX to render the header section. The JSX should display a header identifying the name of your application. Finally, export your Header component and import it to App.js.

Step 4: Add mock data#

To simulate real-world data and test our application, we’ll create a mock dataset representing to-do tasks.

For this, create a file data.json, in the src directory. Populate the data.json file with sample tasks using the JSON data given below.

Each task is an object with id, task, and complete properties.

• id: It is a unique identifier for each task, crucial for React’s list rendering.

• task: It is the description of the to-do item.

• complete: It is a boolean indicating whether the task is completed.

You also need to import the mock data from the data.json file in the App.js file.

Step 5: Read the list of to-do items and display them#

Now that we have our data and header set up, we’ll create components to display the list of tasks. The first thing to do here is to initialize a new state in the App component using the useState Hook. This state will store our mock data for the component.

Basic syntax for the useState() Hook#

We will create a new state, toDoList, and initialize it with the imported mock data. It will hold the current list of tasks and setToDoList will be used to update this state.

Now we need to map over the toDoList state to render each to-do item in our application. We'll create two components to display the list of tasks.

Create two new files, ToDoList.js and ToDo.js in the src directory. The ToDoList.js file will have a component—ToDoList—that will serve as the container that holds all of our todos, and ToDo.js file will have a component—ToDo— that will render an individual to-do item in our To-do list.

Let's first look at the ToDoList.js file.

We have the ToDoList component that receives toDoList as a prop from the parent component—App.js. It then iterates over the toDoList array and renders a ToDo component for each task. It also assigns a unique key to each ToDo component using the task's id to help React optimize rendering.

Let's first look at the ToDo.js file.

We have the ToDo component that receives a single todo object as a prop. It then renders the task property of the todo object.

Now that both the components are set, we need to import and use the ToDoList component in the App.js file.

Run the code above, and you should now see the "To-Do List" header followed by a list of tasks, each displayed within its own row.

Step 6: Toggle task completion#

We'll allow users to mark tasks as complete or incomplete by clicking on them. Completed tasks will be visually distinguished with a strikethrough.

We will update the ToDo.js file to conditionally apply a CSS class based on the task's completion status. We add the attribute className that conditionally apply the strike class if todo.complete is true, otherwise applies no class.

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

In the styles.css file, we add the strike class which applies a line-through to indicate completion and changes the text color to gray for better visibility.

If you were to look at your React application, you would see some of the tasks with a line through them indicating that a project or task has been completed.

Next, we have to create a function that will toggle the complete status of a task. We will implement this function in the App.js file 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.