Learning a new technology like React can be confusing without hands-on experience. As a developer, building real-world projects is one of the most effective ways to understand concepts and features.
Follow the process of creating a simple to-do list with React, and enhance your understanding of React fundamentals.
Prerequisites for Creating a To-Do List
Before you begin this project, there are several requirements. You need to have a basic understanding of the following, HTML, CSS, JavaScript,ES6, and React. You need to have Node.js andnpm, the JavaScript package manager. You also need a code editor, like Visual Studio Code.
Here’s the CSS that this project will use:
1. Set Up Project Environment
This stage includes all the commands and files needed to set up the project. To begin, create a new React project. Open a terminal and run this command:
This takes a few minutes to install all the files needed and packages as well. It creates a new React application named todo-list. Once you see something like this you are on the right track:
Navigate to the directory of your newly created project using this command:
Run your project locally with this command:
And then view the project in your browser at http://localhost:3000/.
In the src folder of your project, there are a couple of files that you do not need. Delete these files:App.css,App.test.js,logo.svg,reportWebVitals.js,setupTests.js.
Make sure you look for import statements in the files available and remove any references to the deleted files.
2. Create a TodoList Component
This is the component we will implement all the codes needed for the to-do list. Create a file named “TodoList.js” in your src folder. Then to test that everything is working as it should, add the following code:
Open your App.js file, import the TodoList component, and render it inside the App component. It will look something like this:
Go to your local browser that has the localhost:3000 running and check to see “Hello World” boldly written. All good? To the next step.
3. Handle Input and Input Change
This step enables you to trigger an event when you type a task into the input box. Import the useState hook from your React package.useState is a React hook that lets you manage state efficiently.
Use the useState hook to create a state variable named “inputTask” with an initial value of an empty string. In addition, assign the “setInputTask” function to update the value of “inputTask” based on user input.
Create a function called “handleInputChange”, taking in an event parameter. It should update the inputTask state using the setInputTask function. Access the value of the event’s target with event.target.value. This will run whenever the value of the input field changes.
Return a couple of JSX elements. The first is the heading that reads “My Todo-List”, you can decide on any heading you like. Include a couple of attributes to your input elements.type=“text”: This specifies your input type as text,value={inputTask}: This binds the value of the input field to the inputTask state variable, ensuring that it reflects the current value.onChange={handleInputChange}: This calls the handleInputChange function when the value of the input field changes, updating the inputTask state.
Moving on, create a button that will add the inputted task to the list.
At this stage, this is how your browser output will look like.
4. Add Functionality to the “ADD” Button
Use theuseStatehook to create a state variable named ‘list’ with an initial value of an empty array. The ‘setList’ variable stores the array of tasks based on user input.
Create a function handleAddTodo that will run when the user clicks the “ADD” button to add a new task. It takes the todo parameter, which represents the new task entered by the user. Then, create an object newTask with a unique id generated using Math.random(), and the todo property that holds the input text.
Moving on, update the list state by using the spread operator […list] to create a new array with the existing tasks in the list. Append the newTask to the end of the array. This ensures that we don’t mutate the original state array. Finally, reset the inputTask state to an empty string, clearing the input field when the user clicks the button.
Include theonClickattribute to the button element with the text “ADD”. When clicked, it triggers thehandleAddTodofunction, which adds a new task to the list state
At this stage, your browser output will look the same but if you click on the “ADD” button after inputting a task, the input field will empty. If that’s working all right, on to the next step.
5. Add a Delete Button
This is the final step to enable the users to delete their task if they have made a mistake or have completed the task. Create a handleDeleteTodo function that acts as an event handler when the user clicks the “Delete” button for a specific task. It takes the id of the task as a parameter.
Inside the function, use the filter method on the list array to create a new array newList that excludes the task with the matching id. The filter method iterates through each item in the list array and returns a new array containing only the items that satisfy the given condition. In this case, check if the ID of each task is equal to the ID passed as a parameter. Update the list state by calling setList(newList), which sets the state to the new filtered array, effectively removing the task with the matching id from the list.
Use the map method to iterate over each item in the list array and return a new array. Then, create an element to represent a task for each todo object in the list array. Make sure to add the key attribute when rendering a list of elements in React. It helps React uniquely identify each list item and efficiently update the UI when it changes. In this case, set the key to the id of each todo object to ensure uniqueness.
Access the todo property of each todo object. lastly, create a button that when clicked, triggers the handleDeleteTodo function with the id of the corresponding task as a parameter, allowing us to delete the task from the list.
This is how your final code should look like:
This is how your final output will be, with both the add and the delete buttons functioning as expected.
Congratulations, you have created a To-do list that adds and deletes tasks. You can go further by adding styling and more functionalities.
Use Real World Projects to Learn React
Practice can be an effective way of learning. It allows you to apply React concepts and best practices in a hands-on manner, reinforcing your understanding of the framework. There are tons of projects out there, you should need to find the right ones.
