BUILDING A TODO APP WITH REACT

React Todo App Tutorial

A ReactJS Tutorial for Building Awesome Todo App

Published in

OLI Systems

6 min readJun 2, 2022

In this post, I’ll explain how to create a Todo app using React (a JavaScript library for building user interfaces), with ES6 syntax and React hooks from scratch. This will be a very basic app, with an input field for inputting the Todo item and a delete button next to each item to delete the item. Additionally, we will use the useState hook from React to preserve the state of our application and some advanced JavaScript features such as map() , arrayspread, ternary operator and filter()methods. The goal of this tutorial is to assist you in getting started with React.

The complete project code can be found here.

Prerequisites

Please make sure to have the following installed:

NodeJS and NPM — Download page
Create React App — Installation guide

Setup

The first step is to create a new React app using thecreate-react-app command-line tool. We will create a new directory and then create a React app inside the newly-created directory. You may the following commands to accomplish this task.

1 $ mkdir react-todo-app
2 $ cd react-todo-app
3 $ create-react-app ./

To get started from the scratch, let’s remove everything from the src folder except App.js and index.js files. Inside the App.js , remove everything except the parent heading and add an h1element to it <h1> React Todo App </h1> . To see your app in action, run npm startin the terminal window at the root of your project.

This GitHub commit reflects the changes till this point.

CSS and Style

So far, we have created a very basic app that contains only one h1 element. But before moving on, let’s give our app some basic styles to make it appear great. Create a fileApp.css in the src directory and import it into the App.js file. Add the styles from this gist to the App.css file.

You can compare your project with this GitHub commit.

Creating the Initial Mockup

We will start with a simple mockup that has an input field and a button for adding a new Todo item. In the App.js file, create a new div with the class input-wrapper within the parent div .

Create and Display Todos

This section consists of the following steps:

1. Create a New Todo Item

To maintain track of the state inside the React component, we’ll use the useStatehook. The useStatehook takes a state’s initial value and returns an array with two values: the first is a getter function that displays the defined state’s current value, and the second is a setter function that updates the state.

We’ll utilize useStatein this app to keep track of every new Todo item and Todo list. But first, inside the App.jsfile, we’ll import the useStatehook as follows:

import { useState } from "react";

To begin, we’ll create a todostate (getter) with an undefinedvalue and a setTodo(setter) method to set the current todoitem’s value:

const [todo, setTodo] = useState("");

The input fields have an onChangeevent handler which is triggered every time the value of that field changes. This event handler does not provide the value directly but instead provides an eventobject that can be used to get the value using event.target.value.

The setTodosetter function will be attached to the onChange event handler, which will pass the value of the input to the setter function through event.target.value. The value from the input is subsequently used by the setter method to update the state of todo.

You can compare your project with this GitHub commit.

2. Add Todo Item to Todos List

After creating a new Todo, we need to add it to the Todos list. We’ll proceed in the same manner as we did when generating a new Todo item. We’ll create a new useState hook to keep track of the status of the Todos array and add new items to it.

const [todos, setTodos] = useState([]);

Next, let’s create an onClickfunctionaddTodoto add todo item to the Todos array. This function will be triggered when the Addbutton is clicked. It’s important to remember that the state should never be directly mutated. Therefore, we’ll need to make a copy of the Todos array before adding todo items to it. To copy the Todos array and add the todo item to it, we’ll use the Array spread operator.

const addTodo = () => {
    setTodos([...todos, todo]);
};

We want to ensure that the value isn’t empty when adding a new Todo item to the list. This may be done with an if statement in our addTodofunction, which checks for an empty value. Also, after the value of the input is added to the Todos list, we want to clear the input field.

addTodo function to add a Todo item to the Todos list

Finally, we will pass this function to the onClickhandler of the Addbutton.

<button className="add-button" onClick={addTodo}>

This GitHub commit reflects the complete code till this point.

3. Display Todo Items

We’ll make an ulwith the class todo-listto display the entries from the Todos list. We’ll iterate over the elements in the array with the map()method and then show them as liinside the ulelement. We will call the map() method with two arguments, the value of the current item being processed in the array and its index. For our purpose, the indexwill be utilized as the key of li.

We’ll make a new divwith the class todofor each item in the Todos list. This divwill have an liitem and a deletebutton for removing it.

We want to make sure that the list isn’t empty just before we display it. The ternary operator will be used to display the list items as well as a message if the list is empty.

You can compare your project with this GitHub commit to this point.

Deleting Todo Items

Let’s start by creating a onClickfunction that triggers when the delete button is clicked. The filter()method will be used in this delete function, which will construct a new array with all the entries that meet the stated criteria. In our example, we want to make a new Todos array that has all of the items except the one that is being deleted. Finally, update the state with newly created Todos.

Pass the deleteTodo method to the onClick handler of the delete button.

Add deleteTodo function to onClick handler

You can find the code to this point here.

Code Refactoring

To gather the user input and show Todos items, we may rebuild our app by building two independent components, TodoInputand TodoList. In the srcdirectory, create two files: TodoInput.jsand TodoList.js. Fill each file with the content indicated in the code snippets below: