It is necessary after closing the browser, when you open the newly saved all tasks todo.
Website: https://react-todo-app3.vercel.app
Git repository on: https://github.com/paul76546/react-todo-app3
import React, {useState} from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';
function TodoList () {
const [todos, setTodos] = useState ([]);
const addTodo = todo = & gt; {
if (! todo.text || /^\s*$/.test(todo.text)) {
Return;
}
const newTodos = [todo, ... todos];
setTodos (newTodos);
console.log (... todos);
};
const updateTodo = (todoId, newValue) = & gt; {
if (! newValue.text || /^\s*$/.test(newValue.text)) {
Return;
}
setTodos (? prev = & gt; prev.map (item = & gt; (item.id === todoId newValue: item)));
};
const removeTodo = id = & gt; {
const removedArr = [... todos] .filter (todo = & gt; todo.id == id!);
setTodos (removedArr);
};
const completeTodo = id = & gt; {
let updatedTodos = todos.map (todo = & gt; {
if (todo.id === id) {
todo.isComplete = todo.isComplete!;
}
return todo;
});
setTodos (updatedTodos);
};
// h1 heading What are your plans for today?
// (What's the Plan for Today?) English
// changing to-do list for today
// put back
return (
& Lt; & gt;
& Lt; h1 & gt; What's the Plan for Today & lt;? / H1 & gt;
& Lt; TodoForm onSubmit = {addTodo} / & gt;
& Lt; Todo
todos = {todos}
completeTodo = {completeTodo}
removeTodo = {removeTodo}
updateTodo = {updateTodo}
/ & gt;
& Lt; / & gt;
);
}
export default TodoList;
Answer 1, Authority 100%
Line initialization state todos remake at:
const [todos, setTodos] = useState (localStorage.getItem ( 'todos')? JSON.parse (localStorage.getItem ( 'todos')): []);
Adding another function (eg: setTodosWithSave):
const setTodosWithSave = (newTodos) = & gt; {
setTodos (newTodos);
localStorage.setItem ( 'todos', JSON.stringify (newTodos))
}
The functions of the addTodo, updateTodo, removeTodo, completeTodo
change the function setTodos
to setTodosWithSave
Answer 2
// import {reactLocalStorage} from 'reactjs-localstorage';
import TodoForm from './TodoForm';
import Todo from './Todo';
function TodoList () {
// const [todos, setTodos] = useState ([]); for reworking
const [todos, setTodos] = useState (localStorage.getItem ( 'todos') JSON.parse (localStorage.getItem ( 'todos')): []?);
// add another function
const setTodosWithSave = (newTodos) = & gt; {
setTodos (newTodos);
localStorage.setItem ( 'todos', JSON.stringify (newTodos))
};
const addTodo = todo = & gt; {
if (! todo.text || /^\s*$/.test(todo.text)) {
Return;
}
const newTodos = [todo, ... todos];
setTodosWithSave (newTodos);
console.log (... todos);
};
// in front of the console log was setTodos (newTodos);
const updateTodo = (todoId, newValue) = & gt; {
if (! newValue.text || /^\s*$/.test(newValue.text)) {
Return;
}
setTodos (? prev = & gt; prev.map (item = & gt; (item.id === todoId newValue: item)));
};
// 34 string?
const removeTodo = id = & gt; {
const removedArr = [... todos] .filter (todo = & gt; todo.id == id!);
setTodosWithSave (removedArr);
};
const completeTodo = id = & gt; {
let updatedTodos = todos.map (todo = & gt; {
if (todo.id === id) {
todo.isComplete = todo.isComplete!;
}
return todo;
});
setTodosWithSave (updatedTodos);
};
// let toLocal = reactLocalStorage.setObject ( 'var', { 'test': 'test'}); ????? How
// h1 heading What are your plans for today?
// (What's the plane for today?) In English
// I change the list of cases for today
// I put back
Return (
& lt; & gt;
& lt; h1 & gt; list of cases today & lt; / h1 & gt;
& lt; todoform onsubmit = {addtodo} / & gt;
& lt; todo
TODOS = {TODOS}
COMPLETETODO = {COMPLETETODO}
removetodo = {removetodo}
UpdateTodo = {UpdateToDo}
/ & gt;
& lt; / & gt;
);
}
EXPORT DEFAULT TODOLIST;