#Aprendiendo useContext
west fog
west fog
requiero mi contexto para hacer contexto
west fog
¿Tienes algun error?
ninguno
clever bridge
Ya tienes el contexto listo ¿no?
west fog
segun yo, si
clever bridge
Bueno, ahora instalalo en el main.jsx
Facilito
El children es justamente para añadir App dentro del provider
west fog
como etiquetas nomas?
vital terrace
ahora a usarlo como todo un campeon
west fog
lo envuelvo
vital terrace
el provider directamente es como un componente jsx
west fog
se rompio la app
vital terrace
que problema tienes?
west fog
solo esta rota
west fog
solo cuando...
west fog
En el index.jsx no en el app.jsx
a
vital terrace
además recuerda migrar todos los useStates que tienes para usar los del contexto 🤓
west fog
saco esos?
clever bridge
Si señor
west fog
ya vas
clever bridge
Ese es el lugar apropiado para todos tus providers
west fog
west fog
le doy cuello a react?
vital terrace
dale cuello
west fog
tudo bem
clever bridge
Dale a cuello
west fog
ya hasta lo enterre
vital terrace
mandalo 5 metros bajo tierra
clever bridge
Bueno, ahora vamos a usar con el contexto
west fog
la 8 ntambien, no?
clever bridge
La idea del contexto es que lo puedes usar mágicamente en toda tu app, pero es porque está envolviendo App
clever bridge
la 8 ntambien, no?
NO
west fog
ya lo note
vital terrace
quita esa wea fea
west fog
xdf
west fog
cual wea?
clever bridge
Mira, importo el contexto usando useContext
vital terrace
bno dejo que Luis te guie yo me voy a terminar unos componentes 
west fog
el state 🥺
pero ahorita me esta sirviendo pa el estado
vital terrace
pero ahorita me esta sirviendo pa el estado
por eso, el estado ya lo tienes en tu global context
en vez de tenerlo en el app y pasarlo como prop a tus componentes hijos
west fog
dame 5 min, necesito entregar algo
vital terrace
llamas directamente al contexto en el componente que requieras usarlo
west fog
vital terrace
tienes tremendo prop drilling
en el head usa el useContext con el contexto que creaste
ahi recibes la prop text del estado y la usas ahi mismo
lo del explorer es mas de lo mismo, solo que usa el contexto en el componente Column
asi te evitas andar pasando props de componente a componente
y un re-renderizado cada que cambia el estado
clever bridge
Espero que Mike empiece a limpiar su código de los prop-types ☠️
Yo creo que instaló react usando vite pero le dio a typescript
vital terrace
los prop-types son algo que te añade al configurar eslint desde 0
aun asi, al configurarlo con typescript no tendria xq configurarle eslint con prop-types xd
west fog
// regrese
west fog
tienes tremendo prop drilling
lo se :C
clever bridge
Ahora que lo pienso, yo siempre instalo standardjs
dim orchid
Midulovers
vital terrace
Midulovers
qfue
dim orchid
Oli
west fog
Mira, importo el contexto usando useContext
algo asi?
west fog
entonces le cambio el nombre desde ya al stado?
west fog
xq tienes ese import de { text } xd
no era asi?
dim orchid
Tuto de useContext
dim orchid
Y de paso tuto de useReducer
west fog
me papearon 🥹
vital terrace
en el componente que quieres usar el contexto debes hacer esto:
const { text } = useContext(DirContext) // <--- no olvides de importarlo
y ya
west fog
vital terrace
pero define el contexto chavalon
clever bridge
<@1086084675451232267> le papeamos?
Va a tocar
vital terrace
XDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
quita ese createContext de la linea 5
clever bridge
Mike
vital terrace
expliquenle con manzanas
clever bridge
te di un ejemplito
clever bridge
pero no lo estás siguiedo
west fog
pero no lo estás siguiedo
uno dice una cosa y otro otra
clever bridge
vital terrace
Mira, importo el contexto usando useContext
....
west fog
aber
clever bridge
Mike, volvamos
west fog
retorno todo
west fog
se me acaba de joder todo mi proyecto del coraje
pipipi
vital terrace
xd no pasa na
west fog
espero instrucciones
clever bridge
Ok, entonces vamos a un lugar de app donde vas a usar el contexto y me muestras
west fog
Ok, entonces vamos a un lugar de app donde vas a usar el contexto y me muestras
donde lo voy usar, ok
aca en el path
west fog
linea 7
clever bridge
No te adelantes que vas mal
Primero importemos el contexto
Borra los {text} que metiste en el parámetro y en el componente
después lo volvemos a poner
west fog
no me adelante,esos ya estaban
west fog
taban tipo:
clever bridge
uy dios
west fog
asies
clever bridge
prop drilling en su maximo esplendor
xd
Borra todo lo que tenga que ver con text
en Path, vamos a usar el contexto
west fog
ya vas
clever bridge
no necesitamos obtenerlo en App
vital terrace
mejorborraelproyectoyvuelveloahacerconelcontextoxd
clever bridge
porque ya es un contexto Global
west fog
ese igual?
clever bridge
Borrra todo
vital terrace
si vro
vital terrace
todo es todo
clever bridge
lo que tenga que ver con text
vital terrace
no dejes ningun rastro del text
west fog
pipipi
vital terrace
exterminalo como lo hiciste con el import React
clever bridge
En path vamos a llamar en contexto y usamos el text
west fog
limpio
vital terrace
XD creo que la cagué
west fog
XD creo que la cagué
recursivo :0
vital terrace
no, me habia equivocado en un .map
es un sidebar con items que tienen subitems, cambie una cosa y me olvide de cambiar el valor del title del item Xd
clever bridge
@west fog dale, que ahorita me tengo que ir
vital terrace
andaba así:
clever bridge
Lo más dificil era crear y configurar el contexto
west fog
importa el contexto
vital terrace
pero era asi
vital terrace
pasito a pasito, ahora has lo que te dije hace rato
vital terrace
en el componente que quieres usar el contexto debes hacer esto:
```jsx
const { t...
.
clever bridge
Perfecto, ahora vamos a usar ese contexto
usa el hook useContext y ahí poner tu contexto
vital terrace
ah era aqui
no, era en el componente de mi proyecto
west fog
clever bridge
No
west fog
le cambio ese text?
clever bridge
useContext(DirContext)
vital terrace
el setText pa que lo quieres llamar en el componente path xd
clever bridge
Lo que queremos es hacerle saber a React que Dir es un contexto, por lo tanto usamos el hook useContext
Y le enviamos el contexto que importamos
useContext(DirContext)
west fog
el setText pa que lo quieres llamar en el componente path xd
pa que lo sobreescriba
awnata cambio los nombres primero
va asi, no?
la logica digamos
por default le puse un texto
clever bridge
Mike, estás yendote por otro lado
xd
terminemos lo que estamos haciendo y luego haces las pruebas
vital terrace
primero aprende a usarlo despues cambias los nombres de las variables por lo q quieras XD
west fog
digamos ese texto se pintara por ahora aca
west fog
primero aprende a usarlo despues cambias los nombres de las variables por lo q q...
es que estaba confuso con el text
pero si quieren lo vuelvo a cambiar a text
no problem
vital terrace
:v
west fog
pipipi
clever bridge
@west fog Repito, vamos a usar el contexto que creaste
y para usarlo, tenemos que hacerlo con el hook useContext
ejemplo:
En este caso FiltersContext es mi contexto
¿Qué hace? xd solo es una linea de código
west fog
lo siento bandita, ocurrio una emergencia y me fui corriendo
vital terrace
pero mandale el DIrContext dentro del useContext
west fog
dentro del contexto, asi
west fog
pero mandale el DIrContext dentro del useContext
ya va, si era asi entoces
y alli va mi texto por default
vital terrace
aja
west fog
porque aun no he setiado
ya ya
entonces quito el "setA" porque ese no lo uso dentro de ese compo
ok ok
con esa logica ahora el otro componente, es que usa el setPathA, el que setea tambien le importo ese context?
ya pruebo
pero antes cambio eso estilos para se vea mejor
algo asi?
hace esto
lo q no cacho es porque no setea el estado
