I've been working on a Todo List with local storage in React, but I'm running into an issue. It seems that my todos aren't getting stored properly and are disappearing every time the page refreshes. I need to figure out what's causing this problem and how I can fix it. Here is my code:
import React, { useState, useRef, useEffect } from "react";
import TodoList from "./TodoList"
const { v4: uuidv4 } = require('uuid');
const LOCAL_STORAGE_KEY = 'todoApp.todos'
function App() {
const [todos, setTodos] = useState([])
const inputRef = useRef()
useEffect(() => {
const storedTodos = JSON.parse (localStorage.getItem(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
}, [todos])
function toggleTodo(id){
const updatedTodos = [...todos]
const todo = updatedTodos.find(todo=> todo.id === id)
todo.complete =!todo.complete
setTodos(updatedTodos)
}
function handleAddTodo(e){
const name = inputRef.current.value
if (name === '') return
setTodos(prevTodos =>{
return [...prevTodos, {id: uuidv4(), name: name, complete: false}]
})
}
return (
<>
<TodoList todos={todos} toggleTodo={toggleTodo}/>
<input ref={inputRef} type="text" />
<button onClick={handleAddTodo}>Add Todo</button>
<button>Clear Todo</button>
<div>0 Todos Left</div>
</>
)
}
export default App;