How to react keep the data in Localstorage and show

Büşra FERŞADOĞLU 0
Viewed 28

I made a simple todo app with React, but I can keep the data in Localstorage but I can't display it. I created 2 functions named saveLocalTodos and getLocalTodos. I used these functions in useEffect. But didn't work. How can i fix this?

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    getLocalTodos();
  }, [])

  useEffect(() => {
    filteredHandler();
    saveLocalTodos();
  }, [todos, status]);


  const saveLocalTodos = () => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }
  const getLocalTodos = () => {
    if(localStorage.getItem("todos") === null){
      localStorage.setItem("todos", JSON.stringify([]));
    }
    else{
      let todoLocal = JSON.parse(localStorage.getItem("todos"));
      setTodos(todoLocal)
    }
  }

}
local-storage reactjs
1 Answers

I use your code and remove status, filteredHandler() because they are not define. Then , code work

Code:

import React, {useEffect,useState} from 'react';

export function App(props) {
    const [todos, setTodos] = useState([]);
    useEffect(() => {
    getLocalTodos();
  }, [])

  useEffect(() => {
    saveLocalTodos();
  }, [todos]);

  const saveLocalTodos = () => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }
  const getLocalTodos = () => {
    if(localStorage.getItem("todos") === null){
      localStorage.setItem("todos", JSON.stringify([]));
    }
    else{
      let todoLocal = JSON.parse(localStorage.getItem("todos"));
      setTodos(todoLocal)
    }
  }

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen! {todos[0]}</h2>
    </div>
  );
}

Demo: enter image description here

Review your code, I think your saveLocalTodos, getLocalTodos functions have no problem...

Kyn0
Related