My ToDo List
Get a brief overview of the functionality behind the ToDo list app.
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.