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!
|| "" 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("");
};
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
useEffect(() => {
const stringifyTodos = JSON.stringify(todos)
localStorage.setItem("todos", stringifyTodos);
}, [todos]);
useEffect(() => {
const storedTodos = localStorage.getItem("todos")
const items = JSON.parse(storedTodos);
if (items) {
setTodos(items);
}
}, []);
Try this way I think it will work.
I Fixed the problem by initializing the todos state by getItem()
like this :
const [todos, setTodos] = useState<todosObj[]>(
JSON.parse(localStorage.getItem("todos") || "") || []
);
If someone knows the reason why it wasn't working please tell me.