[React] Hilo General - Una librería para atraerlos y atarlos a todos

B

.

1 respuesta
isvidal

#511 Lo normal es:

Listado => [items, setItems] = useState([])
ElementoDelListado setItems={setItems}

Entonces en ElementoDelListado simplemente haces el setItems(i => [...i, item])

Y en el padre (Listado) puedes hacer lo que quieras pues es donde tienes el hook.

No se si me he explicado, eso en un caso super simple claro, si entre el listado y los elementos hay 20 cosas por medio, o estos elementos tambien afectan a otras cosas en la otra punta de la app, pues ahi si que ya lo mejor es tirar de context o redux

1 respuesta
B

.

1 respuesta
isvidal

#513 A ver, si solo son 3 niveles, siempre puedes subir el useState al contenedor, y pasar items y setItems al hijo.

Y bueno, recuerda que es React pero sigue siendo JS, si quieres hacer magia negra, siempre puedes poner un listener en el contendor del evento click, y si el target es el esperado hacer lo que tengas que hacer.

Esto es una guarrada y no es de "React way" pero a veces va bien pensar un poco fuera de la "burbuja" en la que nos meten estos "frameworks", que, a mi por lo menos, a veces se me olvida que al final es js de navegador de mierda.

1 respuesta
B

.

1 respuesta
Wei-Yu

A mí lo de pasarle callables a "varias generaciones" de hijos me parece una guarrada del copón la verdad, pero parece que es lo normal porque si no se llenaría de contextos a mansalva. El único lado positivo que le encontré es que en js puedes deconstruir los args y puedes sanear algo las props y todo lo que usas dentro del scope del componente, porque si no menuda fiesta.

Por cierto con respecto al tema del OS vas a acabar con un god object que te lleve el estado de las cosas casi fijo (y ese god object va a ser un contexto que con suerte podrás romper en dos o tres objetos).

1 respuesta
B

.

desu

Usa una "store".

JuAn4k4

Para abajo props, ctx o store y para arriba callbacks, ctx o store.

Los callbacks en react siempre con useCallback para evitar re-renders.

Zoko

#515

Si clicar en el escritorio está haciendo que se modifique el estado del listado contenido en el escritorio, de verdad no piensas que ese estado deberia estar en el escritorio? No veo problema ninguno en subir el estado en este caso en concreto.

Me aburría y te he hecho esto, pero tiene cero ventajas respecto a subir el estado a donde tienes que subirlo.

https://codesandbox.io/s/flamboyant-hofstadter-phljt?file=/src/App.js

Para poner en contexto, con cambiar la Key del listado ya harás que se resetee y por lo tanto ahi tienes tu "deselect", pero es un overkill del copón, simplemente me apetecía buscar alternativas que no implicaran mover el estado de sitio. Yo no haría esto de esta manera, y menos aprendiendo.

Solo el tener que escribir el stopPropagation me ha dado bastante grima.

Otra opción sería usar una ref en el listado y detectar clics fuera de él, en el caso de clicar fuera modificas el estado desde el propio listado y a volar.
https://usehooks.com/useOnClickOutside/

Pero desde luego todas me parecen peor opcion que la de subir el estado.

1 respuesta
QuitCat

Cualquier opción menos la del sandbox de #520 , que es original pero destruye y vuelve a recrear todos los componentes :joy:

Lo demás es lo que ya han dicho.
Si son 3 niveles (Contenedor > Lista > Item) lo suyo es tener el estado en el Contenedor, y pasar hacia abajo selectedItems y onItemClick por poner un ejemplo.
Si tienes mas niveles y pasar props va a ser un caos sin sentido, context/redux

17 días después
VonRundstedt

He estado unos meses sin tocar esto y ahora me encuentro queriendo simplemente cambiar el contenido de un container dependiendo de a que se clicke, de si "customers" o "coins", y soy tan inutil que después de estar varias horas intentandolo no soy capaz, acudo al consejo de sabios mediavideros en busca de ayuda :pensive:

spoiler

Sip, con State, no tengo la cabeza ahora para meterme con hooks :sweat_smile:

Que estoy haciendo mal? Además de estar seguramente haciéndolo mucho más complicado de lo que es.

1 respuesta
neoline

#522 Lo primero que estás haciendo mal es no decir que error te da :sweat_smile:
Pero para empezar los binds:

this.changeToCoins = this.changeToCoins.bind(this);
this.changeToCustomers = this.changeToCustomers.bind(this);

Te los puedes ahorrar con un par de arrow functions:

changeToCustomers = () => {
...
}

changeToCoins = () => {
...
}

1 respuesta
isvidal

Los binds no se hacen en el constructor?

1 respuesta
VonRundstedt

#523 No me da ningún error, y por más console.logs que pongo no me resuelve nada. Creo que voy a empezar de 0 porque es demasiado lío. Gracias por el consejo de las arrow functions.

#524 En el constructor están, aquí ha salido el formato algo raro.

1 respuesta
isvidal

#525 El error lo tendras en el Componente Button pues.

isvidal

En cualquier caso el mayor skill que puedes aprender es el de debuguer.

Si yo fuera tu pondria console logs en los metodos que pasas antes del if a ver si se lanzan.

Si no se lanzan es que es problema del button, luego pondria el onClick en el div donde tienes el className App, y si sigue sin salir nada entonces te cargas todo y bones un solo button de html, sin componentes de terceros.

Esto es cutre y podrias acabar antes con un breakpoint, pero ayuda a visualizar el problema en sus distintas partes, e ir escalando hasta acotar el problema real.

1 respuesta
VonRundstedt

#527 Lo del component Button era parte del problema, gracias. No todo el problema though, me seguía sin cambiar el display con el tag style. Con un ternary operator para renderizar uno u otro component se me ha arreglado, pero sigo sin saber porque no funcionaba con el tag style. También me ha ayudado el React Tools, que ni me acordaba de que existía D: shame on me. Gracias por los consejos, os lo dejo aquí por si tenéis curiosidad:

spoiler
1 respuesta
QuitCat

#528 Estabas modificando la prop style (display: 'none') de los componentes CarList y Coins. Seguramente esa prop (style) no se estaba usando dentro de esos componentes

1 respuesta
VonRundstedt

#529 Pues no la había especificado, así que ese sería el problema, si.

:disappointed:

GuaNaGe

Estoy pensando en aprender React este verano. ¿Me recomendáis algún curso en concreto a ser posible en Español?

PD: Mi primera idea es montar un juego de mesa por turnos (que no creo que lo mejor sea react...) la segunda idea es montar una web de consulta de stats de algún juego

3 respuestas
spud

#531 Mirate videos de Bluuweb en youtube por ejemplo

1 respuesta
GuaNaGe

#532 De locos, explica para gente que no sabe declarar una variable no xD??? MUCHAS GRACIAS Bro!!

PD: Me recomiendas aprender React norma lo los hooks que comenta él?

2 respuestas
spud

#533 a ver.. te recomiendo aprender React tanto con componentes funcionales como de clase... este chico enseña Hooks , apréndelo es mas fácil.. pero no te olvides de que también deberías darle caña a los componentes de clase.

1
Wei-Yu

Yo con los docs + buscar cosas concretas en artículos o stack me he quedado bastante contento, aunque supongo que depende del bagaje qeu tenga cada uno (yo ya me defendía con angular y toqué muchas cosas antes y se notaba bastante). Los docs están bien pero siempre te entran dudas... en mi caso algunas como la forma que tendría que tener de "organizarme" mentalmente con los hooks u otras cosas qeu no me quedaron 100% claras como los error boundaries.

Hooks si vienes de otras cosas como yo creo que es lo mejor, si no clases y ya luego hooks si te ves con ganas. Con clases es "lo mismo de siempre" (con muchos matices claro) y con hooks es algo bastante distinto a lo que he hecho; con clases te es más fácil extrapolar a otro fw si mañana haces vue o angular, por ejemplo.

1
isvidal

#533 Yo trabajo con React ya de hace casi 1 a;o, y no he picado ni una clase. Todo se hace funcional y con hooks.

Aprender clases quizas porque te dan un dibujo mas nitido de que es React y que hace, su flujo de vida y tal, pero para trabajar hooks a muerte.

2 1 respuesta
Wei-Yu

#536 cuánto tiempo tiene el proyecto en el que estás? Imagino que es difícil encontrarte un proyecto sea full hooks si no es bastante reciente.

Lo que no me convence del todo es que parece muy fácil liarte a añadir indirección y hacer un churro, pero igual es porque me tengo que habituar, que al final hice poco más que un hola mundo.

1 respuesta
isvidal

#537 El que estoy es nuevo, es todo hooks.

Pero en el anterior era viejo, y era un mixin, lo viejo clases y lo nuevo hooks. Lo que pasa que por la propia naturaleza de React, por bloques, hace que casi nunca nunca tengas que volver a tocar uno de esos componentes viejos, al menos por mi experiencia, en un proyecto, aun viejo, donde el codigo viejo sean clases, el 90% del tiempo estaras haciendo implementaciones nuevas con hooks, y muy muy esporadicamente, arreglar algun bug o extender alguna clase legacy (O transformarla a funcional).

Asi que sea cual sea el caso, a no ser que sea un codebase que el jefe diga, que como esto era clases, ahora todo clases, lo normal y con sentido si trabajas en react, sea donde sea, es que acabes trabajando mayoritariamente con hooks.

3
SupermaN_CK

#531 https://fullstackopen.com/en/

3 respuestas
mnDl

Hoy en día no merece la pena aprender a utilizar clases en React. Ve directo a entender los hooks.

Edit: #531 Si entiendes inglés te recomendaría este curso 100%
https://egghead.io/courses/the-beginner-s-guide-to-react

Es de los mejores que te vas a encontrar. Puedes ponerte subtítulos (únicamente en inglés). Te ayudará a entender la lógica de React desde cero y así tendrás buena base, no es directamente a aporrear el teclado con estados.