Estoy realizando una tradicional app de ToDos con React y context API para compartir el estado en tre los componentes, ya logré hacerlo con un estado para cambiar el tema a oscuro/claro de la app, pero no entiendo muy bien como hacerlo con las tareas (todos)
De esta manera creo el contexto:
import { createContext } from "react";
import { ToDo } from "../types";
export const TodosContext = createContext({
todos: [
{
id: 1,
text: 'Complete online JavaScript course',
done: true
},
{
id: 2,
text: 'Jog around the park 3x',
done: false
},
{
id: 3,
text: '10 minutes meditation',
done: false
},
],
// eslint-disable-next-line @typescript-eslint/no-empty-function
setTodos: (todos:ToDo[]) => {
console.log(todos)
this.todos = todos
},
});
Y este es el componente de un ToDo individual y donde quiero cambiar el estado de un ToDo en específico:
const Todo = ({text, done, id}:ToDo) => {
const { todos, setTodos } = useContext(TodosContext);
const handleDone = (e:any) => {
const newTodos = todos.map(todo => {
if(todo.id === id) {
return {
...todo,
done: !todo.done
}
}
return todo
})
setTodos(newTodos)
}
return (
<div className='todo-wrapper'>
<div className="done-name">
{/* Only show check mark when todo is done */}
{/* {done ? <img className='check' src="/icon-check.svg" alt="" />: ''} */}
<input onChange={handleDone} checked={done} type="checkbox" name="done" id="done" />
<span className={`todo-text ${done ? 'done' : ''}`}>{text}</span>
</div>
<img src="/icon-cross.svg" alt="" />
</div>
)
}
export default Todo
En resumen, cuando cambio el "checked" de un ToDo quiero que se actualice en el contexto global, el problema es que no lo hace y en la linea en que seteo los ToDos en el contexto me sale el error:
this.todos = todos; // Object is possibly undefined.
Como puedo cambiar los valores dentro del array y que se actualicen ?
ACTUALIZACIÓN
Errores al implementar un componente que use el contexto