Otherwise it's hard to read.
My guess is that localStorage is not defined.
Try with window.localStorage as it exist only in the browser on the global window object
I tried that, but it gave me the same error in the Browser. I did it like this:
useEffect(() => {
const storedTodos = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])
But there seems to be a bug that happens when I add a todo it adds 2 of the same items and when I try to remove it it gives me an error:
TypeError: toggleTodo is not a function
handleTodoClick
2 |
3 | export default function Todo({ todo, toggleTodo }) {
4 | function handleTodoClick() {
> 5 | toggleTodo(todo.id)
6 | }
7 |
8 | return (
You should put code inside
Otherwise it's hard to read.
My guess is that
localStorageis not defined.Try with
window.localStorageas it exist only in the browser on the globalwindowobjectI tried that, but it gave me the same error in the Browser. I did it like this:
useEffect(() => {
const storedTodos = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])
useEffect(() => {
window.localStorage.SetItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
}, [todos])
And sorry I don't know how to add that code field.
Try to make a reproducible example on Codesandbox, might be easier for people to help you
Also read dev.to/p/editor_guide
If you want to put the code you do it like this
I have the whole code in my Github :)
github.com/lolleri200/Todo/blob/ma...
it's
not
developer.mozilla.org/en-US/docs/W...
Ohh thanks! Works perfectly now :)
But there seems to be a bug that happens when I add a todo it adds 2 of the same items and when I try to remove it it gives me an error:
TypeError: toggleTodo is not a function
handleTodoClick