Как сделать запись текущей даты в форму и сохранить в local storage?
как записать текущую дату в local storage и затем чтобы выводилась в списке задач? думаю надо использовать let now = new Date().toLocaleDateString(); но дальше теряюсь. Сайт: https://react-todo-app3.vercel.app Репозиторий на гит: https://github.com/paul76546/react-todo-app3
//import {reactLocalStorage} from 'reactjs-localstorage';
import TodoForm from './TodoForm';
import Todo from './Todo';
function TodoList() {
//const [todos, setTodos] = useState([]);переделываем на
let [todos, setTodos] = useState(localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : []);
//добавляем еще одну функцию
let setTodosWithSave = (newTodos) => {
setTodos(newTodos);
localStorage.setItem('todos', JSON.stringify(newTodos));
};
let addTodo = todo => {
if (!todo.text || /^\s*$/.test(todo.text)) {
return;
}
let newTodos = [todo, ...todos];
setTodosWithSave(newTodos);
};
//console.log(...todos);
//перед консоль лог было setTodos(newTodos);
//let updateTodo = (todoId, newValue) => {
//if (!newValue.text || /^\s*$/.test(newValue.text)) {
//return;
//}
//setTodos(prev => prev.map(item => (item.id === todoId ? newValue : item)));
const updateTodo = (todoId, newValue) => {
if (!newValue.text || /^\s*$/.test(newValue.text)) {
return;
}
setTodosWithSave(todos.map(item => (item.id === todoId ? newValue : item)));
};
//setTodos(newTodos);
//localStorage.setItem('todos', JSON.stringify('value'));
//setTodosWithSave.push{'id', 'text'};
//console.log(...todos);
//34 строка?
const removeTodo = id => {
const removedArr = [...todos].filter(todo => todo.id !== id);
setTodosWithSave(removedArr);
};
let completeTodo = id => {
let updatedTodos = todos.map(todo => {
if (todo.id === id) {
todo.isComplete = !todo.isComplete;
}
return todo;
});
setTodosWithSave(updatedTodos);
}
//h1 заголовок Какие планы на сегодня?
// (What's the Plan for Today?) по английскому
// меняю на Список дел на сегодня
//ставлю обратно
return (
<>
<h1>Список дел на сегодня</h1>
<TodoForm onSubmit={addTodo} />
<Todo
todos={todos}
completeTodo={completeTodo}
removeTodo={removeTodo}
updateTodo={updateTodo}
/>
</>
);
};
export default TodoList; ```
Ответы (1 шт):
Автор решения: Илья Паймушкин
→ Ссылка
Мне больше всего нравится toISOString
в вашем файле react-todo-app3/src/components/TodoForm.js
const handleSubmit = e => {
e.preventDefault();
props.onSubmit({
id: Math.floor(Math.random() * 10000),
text: input,
date: new Date().toISOString(),
});
setInput('');
};
Далее в файле react-todo-app3/src/components/Todo.js
return todos.map((todo, index) => (
<div
className={todo.isComplete ? 'todo-row complete' : 'todo-row'}
key={index}
>
<div key={todo.id} onClick={() => completeTodo(todo.id)}>
{todo.text}
</div>
<div>{todo.date}</div>
<div className='icons'>
<AiOutlineCloseSquare
onClick={() => removeTodo(todo.id)}
className='delete-icon'
/>
<FiEdit3
onClick={() => setEdit({ id: todo.id, value: todo.text })}
className='edit-icon'
/>
</div>
</div>
));
А дальше для того чтобы вывести в человеко-подобный вид, можно поиграть с форматами дат:)