How to Create A Simple Todo List in React
by Aiden Oliver
In this tutorial, I am going to show you how to build a functional Todo App in React.
To get started, type npx create-react-app my-app in your project folder. In case you don’t have npx, you can install the package with your desired package installer such as yarn, npm, homebrew, etc..
Step 1.
Aside from the main App function, we are going to want to build two other main functions to handle our Todo list. The first one will be our Todo function and we will be including the arguments: todo, index, completeTodo, and removeTodo in curly braces. We will be creating these arguments later in the code but for now create a return with a div and as part of the div you will want to make a style that will strike a line through our text. We can do this by using a ternary operator, which is essentially a conditional statement.
Next, we add todo.text inside our div to display the text of our todo value that we will define later. We then create another div and inside of it we will have two buttons: one to complete the todo item and another to remove it.
Now your code should look something like this:
Step 2.
After that, make another function called TodoForm. We will add in a function that we will create later called addTodo to the argument in the form of an object.
Inside the newly created function, create a new useState hook called value with its setter function and make sure to add an empty string in the useState argument. Also, create a function called handleSubmit with “e” as the argument. Inside the body of the function you will want to call “e” which is also known as the event and bind the preventDefault method to it, then add a condition that returns the function if the argument is not set to “value”.
We will then call the addTodo function and give it the argument of value and below that use our setter function from the useState to set value to an empty string.
Step 3.
In the return value, add a from with an onSubmit to call the handleSubmit function we made and inside the form create an input and set the value of the input to value and then add an onChange with an arrow function in it and make sure to use “e” as the argument for the arrow function. After that call the setValue setter function and give it the argument of e.target.value.
Your code should look something like this:
Step 4.
Inside our main App function create another useState hook with the value of todos. We will now add our addTodo function with the text argument and inside of this function we will create a new variable and set it equal to an array with a spread operator in it and then adding our todos variable hook. Right after add the “text” parameter inside some curly braces.
Finally, call the setTodos setter function from our useState hook and set the argument for newTodos. This will update the todos hook with all of the input using the spread operator and the text parameter like this:
Step 5.
Now, we create the final two components. We will create a function called completeTodo that takes in the index parameter. Inside of this function we well call new todos and set it as an array with the spread operator followed by our todos variable inside of it.
After that we will call newTodos while appending the an array with index inside to it followed and then bind it to “isComplete” and set it equal to true. After this call our todo setter function with the newTodos argument passed to it.
For our removeTodo function the only thing that will be different is the second line in this function, the rest of the body and arguments will be the same as our previous function. What you can do is just copy and paste the body of the completeTodo function into our remove function and change the second line to “newTodos.splice(index, 1)”.
Now, all we have to do is add our JSX. We will make a div called todo-list and inside of that div we will map all of our input from the array that comes from the todos useState hook. Inside of our map we will add todo and index for the parameters and then return some parenthesis. Inside the parenthesis add the Todo component and set the key, index, todo, completeTodo, and removeTodo values within it. Just after the map method add the TodoForm with the addTodo value like so:
That is how you make a very basic todo app in React.
