I'm trying to create a to-do list app with ReactJs, working with localStorage the setItem() works fine but the getItem() doesn't return anything except empty array!

• I'm using || "" because the JSON.parse() returns string || null in TypeScript.

useEffect(() => {
   localStorage.setItem("todos", JSON.stringify(todos));
 }, [todos]);

 useEffect(() => {
   const items = JSON.parse(localStorage.getItem("todos") || "");
   if (items) {
     setTodos(items);
   }
 }, []);

Here's where i supply data to todos

const [todos, setTodos] = useState<todosObj[]>([]);
const [count, setCount] = useState(1);
const [status, setStatus] = useState<"All" | "completed" | "uncompleted">(
    "All"
  );
const [inputText, setInputText] = useState("");
const [date, setDate] = useState(new Date());

const inputHandler = (e: React.FormEvent<HTMLInputElement>) => {
    setInputText(e.currentTarget.value);
  };

const submitHandler = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setCount(count   1);

    if (inputText !== "") {
      setTodos([
        ...todos,
        {
          id: count,
          text: inputText,
          completed: false,
          date: date,
        },
      ]);
    }

    setInputText("");
  };

CodePudding user response：

Sorry, I dont have enough reputation to comment, so have to post it as an answer:

Is the initial data for todos set? It is better if you can provide where you supply data to todos

CodePudding user response：

useEffect(() => {
   localStorage.setItem("todos", JSON.stringify(todos));
 }, [todos]);

 useEffect(() => {
   const storedTodos = localStorage.getItem("todos")
   const items = JSON.parse(storedTodos);
   if (items) {
     setTodos(items);
   }
 }, []);

Try this way I think it will work.