My ToDo List
Explore building a functional ToDo List app in ReactJS. Understand how to manage state with hooks, pass data via props, generate unique keys using nanoid, and persist tasks with localStorage to maintain data across sessions.
We'll cover the following...
Overview
My ToDo List is a productivity app that lets us add our daily tasks to the task list and, optionally, delete the task once it’s finished.
To take a user’s input, we’ll add the Input component with an input element where we can add our tasks. We’ll need to press “Enter” to add the task. After adding the Input component, the input value will go to the ToDoList component by using props. These are used to pass data from parent to child components and show the task value in the CSS grid format.
We’ll use a nanoid to generate unique values for the key prop. The key prop helps React identify which items are changed, added, or removed.
You can experiment with the final app below.
:root {
--brand-color: #0ea5e9;
--dark-color: #0f172a;
--mid-color: #cbd5e1;
--light-color: #ffffff;
}
.appHeader {
background-color: var(--brand-color);
}
.appTitle {
color: var(--dark-color);
text-align: center;
padding: 0.5em;
}
We’ll use localStorage to store our data and retrieve it from local storage. This stores our task list in local storage and prevents erasure, even if the page is refreshed. We’ll also create functions like onChangeHandler to handle changes in the input value of the task and onDeleteHandler to delete the selected item from the todo list.