React Hooks useContext con createContext

Para poder hacer uso de este hook de React es necesario implementar 3 sencillos pasos. Lo primero sería crear un archivo donde vivirá el contexto para toda nuestra aplicación, para este ejemplo lo llamaremos Contexto.jsx.
Hacemos la importación de los hooks a utilizar para este ejemplo

import {createContext,useContext,useState} from 'react'

1. Definimos el contexto

const Appcontext = createContext({
  items:[],
  create:()=>{}
})

Dentro estamos nombrando las operaciones que van a vivir dentro del contexto las cuales van a poder ser accedidas desde los otros componentes.

1. Implementación

export default function Contexto({children}){
  const [items,setItems]= useState([
    {
      id: 0,
      title: 'empezar'
    },
    {
      id:1,
      title: 'terminar'
    }
  ])

  function create(item){
    setItems([...items,item])
  }

  return(
    <AppContext.provider
    value={{
      items,
      create,
    }}
    >
      {children}
    </AppContext.provider>
  )
}

Va a recibir como prop la palabra children que hace referencia a los hijos que va a contener en este caso la función contexto.
Dentro del mismo archivo que estamos trabajando vamos a crear la función que va a contener los metodos y operaciones que se quieran llevar a cabo y que serán ejecutadas desde los componentes que necesiten acceder a ellas.
Por ultimo en el return hacemos el llamado a para pasar como props la información del componnete y el quien dibujara los elementos contenidos.

1. Adicionalmente podemos crear una función que haga el llamado a el contexto para con esto únicamente tener que invocarla dentro de los componnetes que necesiten acceder a la información.

export function useAppContext(){
  return useContext(Appcontext)
}

Ahora para poder hacer uso de este Hook dentro del componente APP.jsx hacemos la importación del componnete Contexto.jsx y envolvemos dentro de este al componente que queramos que tenga acceso a lo establecido dentro de Contexto.jsx, en este caso será el componente Todo

import Todo from './components/Todo'
import {Contexto} from './components/Contexto'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h2>Provider</h2>
      <Contexto>
        <Todo/>
      </Contexto>
    </div>
  )
}

export default App

Para finalizar en el componente Todo.jsx importamos el useAppContext para poder acceder y modificar los elementos del contexto.

import { useAppContext } from '../utils/Contexto'

export const Todo = () => {
    const contexto = useAppContext()
  return (
    <div>
     <p>conexto.items[0]</p>
    </div>
  )
}

👽 Espero sea útil esta información, no olvides dejar tu comentario y dar like :)👽

👀👀👀👀También pueden seguirme en tiktok👀👀👀👀