I have context setup in my project. It's a todo list. And when i setup the context it's an empty array.
Everytime i submit a todo item it is set in localStorage. Now when i refresh the page i'm setting the localStorage to the empty array of the context and it overrides what i had in localStorage.
Horrible explanation but i hope you get the gist. I'll upload some code below.
Context:
import React from "react";
export const TodoContext = React.createContext();
export function TodoComponent({ children }) {
const [todoItems, setTodoItems] = React.useState([]);
return (
<TodoContext.Provider value={[todoItems, setTodoItems]}>
{children}
</TodoContext.Provider>
);
}
Form:
function Form() {
const [todoItems, setTodoItems] = useContext(TodoContext);
const [todoInput, setTodoInput] = useState("");
useEffect(() => {
const localTodoItems = JSON.parse(localStorage.getItem("todos"));
setTodoItems(localTodoItems);
}, []);
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todoItems));
}, [todoItems]);
const handleSubmit = (e) => {
e.preventDefault();
if (todoInput.length >= 1) {
setTodoItems([
...todoItems,
{ id: todoItems.length + 1, name: todoInput },
]);
setTodoInput("");
} else {
return false;
}
};
return (
<>
<FormWrapper>
<form action="" onSubmit={handleSubmit}>
<input
type="text"
name=""
id=""
placeholder="Todo"
value={todoInput}
onChange={(e) => setTodoInput(e.target.value)}
/>
<input type="submit" value="Toevoegen" />
</form>
</FormWrapper>
</>
);
}
List:
function List() {
const [todoItems, setTodoItems] = useContext(TodoContext);
useEffect(() => {
const localTodoItems = JSON.parse(localStorage.getItem("todos"));
setTodoItems(localTodoItems);
}, []);
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todoItems));
}, [todoItems]);
const deleteButton = (e, id) => {
e.preventDefault();
const newArray = todoItems.filter((item) => {
if (item.id !== id) {
return item;
}
});
setTodoItems(newArray);
};
return (
<>
<ListWrapper>
<ul className="list">
{todoItems?.map((item) => {
return (
<>
<li className="list__item" key={item.id}>
<div className="todo">
<span className="todo__label">{item.name}</span>
<button
className="todo__delete"
onClick={(e) => deleteButton(e, item.id)}
>
Delete
</button>
</div>
</li>
</>
);
})}
</ul>
</ListWrapper>
</>
);
}
Thanks!