React Hooks LocalStorage setState override elements - reactjs

Question

I'm struggling with React hooks using useEffect in case of storing tasks in localstorage, so refreshing page will still handle the elements from the list. The problem is while I'm trying to get the elements from LocalStorage and set them for todos state. They exist inside localStorage, but element that is inside todos state is only one from localstorage.
Here is a Component that handling this:
const [todos, setTodos] = useState([]);
const [todo, setTodo] = useState("");
const addTask = (event) => {
event.preventDefault();
let newTask = {
task: todo,
id: Date.now(),
completed: false,
};
setTodos([...todos, newTask]);
setTodo("");
};
const getLocalStorage = () => {
for (let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue;
}
let value = localStorage.getItem(key);
try {
value = JSON.parse(value);
setTodos({ [key]: value });
} catch (event) {
setTodos({ [key]: value });
}
}
};
const saveLocalStorage = () => {
for (let key in todos) {
localStorage.setItem(key, JSON.stringify(todos[key]));
}
};
useEffect(() => {
getLocalStorage();
}, []);
useEffect(() => {
saveLocalStorage();
}, [saveLocalStorage]);
const testClick = () => {
console.log(todos);
};
return (
<div className="App">
<h1>What would you like to do?</h1>
<TodoForm
todos={todos}
value={todo}
inputChangeHandler={inputChangeHandler}
addTask={addTask}
removeCompleted={removeCompleted}
/>
{/* <TodoList todos={todos} toogleCompleted={toogleCompleted} /> */}
<button onClick={testClick}>DISPLAY TODOS</button>
</div>
);
Second problematic error while refreshing page:
Apart from that I can not display elements after getting them from local storage. Probably I'm missing some stupid little thing, but I stuck in this moment and I was wondering if small explanation would be possible where I'm making mistake.

Answer 1

I think you are overwriting the state value all together. You want to append to what exists in the todo state. You could use the spread operator to set the todo to everything that's already in there plus the new value.
Something like this:
setTodos({...todos, [key]: value });
setTodos([...todos, [key]: value ]);
Note that spread operator is a shallow clone. If you have a deeper object (more than two layers i think) then use something like cloneDeep from the lodash library.
To see whats happening change this block to add the console.logs
try {
value = JSON.parse(value);
setTodos({ [key]: value });
console.log(todos);
} catch (event) {
console.log('There was an error:', error);
// Should handle the error here rather than try to do what failed again
//setTodos({ [key]: value });
}
Edit: regarding the error you added.
You are trying to use map on an object. map is an array function.
Instead you would convert your object to an array and then back:
const myObjAsArr = Object.entries(todos).map(([k,v]) => {
// Do stuff with key and value
}
const backToObject = Object.fromEntries(myObjAsArr);
Change this to set an array (not object):
setTodos([...todos, [key]: value ]);
Put console logs everywhere so you can see whats happening.