0

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

introducir la descripción de la imagen aquí

1 respuesta 1

0

Intenta creando un Contexto y usa un componente funcional "ContextProvider" que te permitirá utilizar el contexto en conjunto con useState([]) para poder manejar a lista de tareas a tu antojo, y eso te permitira que los elementos hijos del componente "ContextProvider" que utilicen los recursos del contexto vuelvan a renderizar la lista ni bien esta cambie:

AppContext.tsx

import { createContext, useState } from "react";

// tareas
const todosData: task[] = [
  {
    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,
  },
];

interface AppContext { // definimos un tipo que que sera el tipo del contexto
  todos: task[]; // representa la lista de tareas del useState
  setTodos: Function; // representa la funcion setTodos del useState
} // si necesitaramos mas propiedades para el contexto deberiamos agregarlas aqui

const defValues: AppContext = { // definimos valores por defecto para el contexto
  todos: todosData,
  setTodos: () => {},
};

export const context = createContext<AppContext>(defValues); // declaramos el contexto con su tipo y sus valores por defecto

export function AppContextProvider({ children }: any) { // componente funcional proveedor, cuando lo renderizemos sus hijos podran acceder a los recursos

  const [todos, setTodos] = useState(todosData); // este useState reemplazara a los valores por defecto
  // por otro lado, definimos como valor por defecto del useState la lista de tareas
  
  return ( 
    <context.Provider value={{ todos, setTodos }}>{children}</context.Provider>
  );
}

Este componente proveedor del contexto estará renderizado en la raíz de mi proyecto y envolverá al componente <App> que a su vez envuelve al resto de mi aplicación, lo que permitirá que toda la aplicación acceda a los recursos del contexto, aunque esto es dependiendo de las necesidades claramente

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { AppContextProvider } from './AppContext';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AppContextProvider>
      <App />
    </AppContextProvider>

    {/* otros contextos... */}

    {/* otros componentes... */}
    
  </React.StrictMode>
)

App.tsx (componente que recorrerá la lista y renderizara los componentes ToDo)

import { useContext } from "react";
import { context } from "./AppContext";
import ToDo from "./ToDo";

function App() {
  const { todos } = useContext(context);

  return (
    <>
      {todos.map((elem: task, i: number) => {
        return <ToDo id={elem.id} done={elem.done} text={elem.text} key={i}></ToDo>
      })}
    </>
  );
}

export default App;

ToDo.tsx

import { useContext } from "react";
import { context } from "./AppContext";
import "./styles/styles.css";

export default function ToDo({ text, done, id }: ToDo_Props) {
  const { todos, setTodos } = useContext(context);

  const handleDone = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTodos = todos.map((todo) => {
      if (todo.id === parseInt(e.target.id)) todo.done = !todo.done;
      return todo;
    });
    setTodos(newTodos);
  };

  return (
    <div className="todo-wrapper">
      <div className="done-name">
        <input
          onChange={handleDone}
          checked={done}
          type="checkbox"
          id={`${id}`}
        />
        <span className={`todo-text ${done ? "done" : ""}`}>{text}</span>
      </div>
      <img src="/icon-cross.svg" alt="" />
    </div>
  );
}

Types.tsx (para mas organización de las interfaces)

interface task {
  id: number,
  text: string,
  done: boolean
}

interface ToDo_Props {
  text: string, 
  done: boolean, 
  id: number
}

introducir la descripción de la imagen aquí

Documentación util de Context con TypeScript.

Cualquier duda solo pregunta.

3
  • Estoy intentando implementar tu solución, pero tengo unos problemas en el componente que usa el contexto, coloco un screenshot con los errores.
    – kilex
    Commented el 23 may. 2023 a las 15:13
  • @kilex poco me dice ese error, hablame por aqui Commented el 23 may. 2023 a las 16:01
  • Ya te escribí por allí
    – kilex
    Commented el 23 may. 2023 a las 20:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.