Não sei porquê, mas o formData na função editarTodo está vindo vazio.
Com isso, quando vai tentar salvar um Todo editado, a descrição fica vazia lá na página.
import { useEffect, useState } from 'react'
import TodoContext from './TodoContext'
const TODOS = 'todos'
export default function TodoProvider({ children }) {
const savedTodos = localStorage.getItem(TODOS)
const [todos, setTodos] = useState(savedTodos ? JSON.parse(savedTodos) : [
{
id: 1,
description: "JSX e componentes",
completed: false,
createdAt: "2022-10-31"
}
])
const [selectedTodo, setselectedTodo] = useState(null)
const [mostrarModal, setmostrarModal] = useState(false)
useEffect(() => {
localStorage.setItem(TODOS, JSON.stringify(todos))
}, [todos])
const abrirModalForm = (todo) => {
// if (todo) {
// setselectedTodo(todo)
// }
setmostrarModal(true)
}
const fecharModalForm = () => {
setmostrarModal(false)
setselectedTodo(null)
}
const addTodo = (formData) => {
const description = formData.get('item')
setTodos(prevState => {
const todo = {
id: prevState.length + 1,
description: description,
competed: false,
createdAt: new Date().toISOString()
}
return [...prevState, todo]
})
}
const alternarTodoCompleted = (todo) => {
setTodos(prevState => {
return prevState.map(t => {
if (t.id === todo.id) {
return {
...t,
completed: !t.completed
}
} else {
return t
}
}
)
})
}
const editarTodo = (formData) => {
setTodos(prevState => {
return prevState.map(t => {
if (t.id === selectedTodo.id) {
return {
...t,
description: formData.get('description')
}
}
return t
})
})
}
const removerTodo = (todo) => {
setTodos(prevState => {
return prevState.filter(t => {
return t.id !== todo.id
})
}
)
}
const mostrarModalEditar = (todo) => {
setselectedTodo(todo)
abrirModalForm()
}
return (
<TodoContext
value={{
todos,
addTodo,
alternarTodoCompleted,
removerTodo,
mostrarModal,
abrirModalForm,
fecharModalForm,
selectedTodo,
mostrarModalEditar,
editarTodo
}}>
{children}
</TodoContext>
)
}
