This repository contains a simple todo list application built with React. The application allows users to add, toggle, and delete todo items. The state of the todos is synchronized with the local storage, ensuring data persistence across page reloads.
-
useState
Hook and Local Storage:- The code starts by importing the
useEffect
anduseState
hooks from React. - It declares a state variable called
todos
using theuseState
hook. The initial state is set by using a function that retrieves data from the local storage. If there are no items in the local storage, an empty array is used as the initial state.
- The code starts by importing the
-
useEffect
Hook for Local Storage Synchronization:- The
useEffect
hook is used to synchronize thetodos
state with the local storage. - It watches for changes in the
todos
state (provided as the second argument to theuseEffect
hook) and triggers the effect whenever the state changes. - Inside the
useEffect
, thelocalStorage.setItem
method is used to store the updatedtodos
state in the local storage. TheJSON.stringify
function is used to convert the state data to a JSON string before storing it.
- The
-
addTodo
Function:- The
addTodo
function is used to add a new todo item to thetodos
state. - When called, it takes a
title
as an argument, which represents the title of the new todo item. - It uses the
setTodos
function to update the state. It takes a callback function that receives the current state (currentTodos
) and returns the updated state. - In this case, the function creates a new todo object with a unique
id
, the providedtitle
, and a defaultcompleted
value offalse
. - The new todo object is then appended to the current todos using the spread operator (
...currentTodos
), and the updated state is set withsetTodos
.
- The
-
toggleTodo
Function:- The
toggleTodo
function is used to toggle thecompleted
status of a todo item with a givenid
. - When called, it takes
id
andcompleted
as arguments.id
represents the unique identifier of the todo item, andcompleted
represents the newcompleted
status for the todo item. - It also uses the
setTodos
function with a callback to update the state. - The function maps through the current todos (
currentTodos
) usingcurrentTodos.map(todo => { ... })
. - If the
id
of the current todo matches the providedid
, it returns a new todo object with the updatedcompleted
status. Otherwise, it returns the original todo object unchanged.
- The
-
deleteTodo
Function:- The
deleteTodo
function is used to remove a todo item with a specificid
from thetodos
state. - When called, it takes the
id
of the todo item to be deleted as an argument. - Similar to the previous functions, it uses the
setTodos
function with a callback to update the state. - The function uses
currentTodos.filter(todo => todo.id !== id)
to filter out the todo item with the providedid
from thecurrentTodos
, effectively deleting it from the state.
- The
The main App
component renders the following components:
NewTodoForm
: Allows users to input a new todo item and submit it. It calls theaddTodo
function when a new todo is submitted.TodoList
: Displays the list of todos. It takes thetodos
state as a prop and renders each todo item accordingly. It also provides thetoggleTodo
anddeleteTodo
functions as props to handle toggling and deleting todos.
By using these functions and components together, the app can manage a list of todos, add new todos, mark them as completed, and delete them from the list. The state of the todos is synchronized with the local storage, ensuring that the data persists across page refreshes or visits.