Code — How to create ToDo list in React #Simple Step by Step

4 min readJun 6, 2023

Certainly! Let’s go through the code in more detail and explain each part:

This line imports the necessary modules from the react package. We import the React object and the useState hook from the package. The useState hook allows us to manage state within a functional component.

Here, we define our functional component called TodoList. Within this component, we declare two state variables using the useState hook:

todos represents the array of todos. We initialize it with an empty array [].
inputValue represents the value of the input field for adding new todos. We initialize it with an empty string ‘’.

The useState hook returns an array with two elements: the current state value and a function to update the state. In this case, we use array destructuring to assign the values returned by useState to todos and setTodos (for managing the todos state), and inputValue and setInputValue (for managing the input field state).

The addTodo function is called when the "Add" button is clicked. It checks if the trimmed inputValue (without leading or trailing spaces) is not an empty string. If it's not empty, it adds the inputValue to the todos array using the spread operator [...todos, inputValue]. This creates a new array with all the existing todos and the new todo appended at the end. It then updates the todos state using the setTodos function and clears the input field by setting the inputValue to an empty string.

The deleteTodo function is called when the "Delete" button is clicked for a specific todo item. It takes the index of the todo as a parameter. It creates a new array newTodos by filtering out the todo at the given index using the filter method. It checks each todo's index i and only keeps the ones where i is not equal to the index we want to delete. Finally, it updates the todos state with the new array of todos using the setTodos function.

In the return statement, we define the JSX (JavaScript XML) code that represents the component’s output.

We have an <h2> heading displaying “Todo List”.
We render an <input> element for entering new tasks. The value attribute is set to the inputValue state variable, which makes it a controlled component. The onChange event handler updates the inputValue state whenever the input value changes.
The “Add” button triggers the addTodo function when clicked.
We use an <ul> element to display the list of todos. We use the map function on the todos array to iterate over each todo. For each todo, we render an <li> element with the todo’s text. The key attribute is set to the index to provide a unique identifier for each todo item. Each todo item is also accompanied by a “Delete” button. Clicking the “Delete” button triggers the deleteTodo function with the corresponding index.
Finally, we export the TodoList component as the default export, making it available for use in other parts of the application.
This implementation provides a basic todo list functionality using function components in React.
If you want to display a dustbin symbol instead of a button or within a button, you can use an icon library or an SVG (Scalable Vector Graphics) icon to represent the dustbin symbol. Here’s an example using the popular React Icons library: