Hola he hecho un To Do List que almacena las tareas en el localStorage del navegador, para que cuando recargues la página éstas sigan apareciendo y no se borren, funciona de manera extraña y no hace lo que debe. De alguna forma no consigo guardar el estado de la tarea, porque puedes crear una tarea, pinchar en ella, y tacharla, al hacer esto la tarea tendrá nuevos estilos fácilmente visibles.
Cuando hago click en una tarea y la tacho, y recargo la página, ésta no aparece tachada, es decir, no ha almacenado su estado.
El código del componente a la hora de agregar las tareas, y donde hago uso de LocalStorage es el siguiente:
function TodoList() {
const [tareas, setTareas] = useState([]);
useEffect(() =>{
if (localStorage.getItem("localTasks")){
const storedList = JSON.parse(localStorage.getItem("localTasks"))
setTareas(storedList);
}
},[])
const agregarTarea = tarea => {
console.log(tarea)
if(tarea.text.trim()){ /* Verifica que la cadena no está vacía */
tarea.text = tarea.text.trim(); /* Quita los espacios innecesarios */
const tareasActualizadas = [tarea, ...tareas]; /* Generamos un array con todas las
tareas anteriores, pero en primer lugar, la nueva tarea */
setTareas(tareasActualizadas); /* Actualizamos el estado */
localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas))
}
}
const EliminarTarea = id => {
const tareasActualizadas = tareas.filter(tarea => tarea.id !== id);
setTareas(tareasActualizadas);
localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas))
}
const CompletarTarea = id => {
const tareasActualizadas = tareas.map(tarea => {
if(tarea.id === id){
tarea.complete = !tarea.complete;
}
return tarea;
});
setTareas(tareasActualizadas);
}
return (
<>
<TaskForm
onSubmit={agregarTarea}
/>
<div className="task-todolist-wrapper">
{
tareas.map((tarea) =>
<Task
key={tarea.id}
id={tarea.id}
text={tarea.text}
complete={tarea.complete}
completeTask={CompletarTarea}
removeTask={EliminarTarea}
/>
)
}
</div>
</>
)
}
export default TodoList
He probado a poner localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas))
al final del método CompletarTarea que lo que hace es cambiar el estado de una clase de true a false en función del click pero no da resultado.
Podéis ver el funcionamiento de la App en este enlace https://todolistjuanjesc.netlify.app/
Un saludo y gracias de antemano.