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;
}
My ToDo List

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.