Vamos a lo interesante, que es renderizar una colección de elementos con React.
Ya vimos el conditional rendering, ya vimos el state, ya vimos el tema de las props.
Pues ahora lo que nos falta es saber cómo podemos renderizar una lista de elementos.
Así que vamos aquí a nuestro proyecto.
En este tenemos aquí la clase 4 del bootcamp.
Y en este caso podríamos crear este array de notas, ¿no?
Así que vamos a darle aquí al array de notas.
Ya tendríamos un array de notas.
Esto es un array y dentro del array tenemos tres elementos, ¿vale?
Que son objetos.
Este objeto tiene un ID1 con el contenido con este string, una fecha y nos dice si es importante o si no es importante.
Con true o false, con un booleano.
Así que, ¿cómo podríamos hacer para poder renderizar todos estos elementos?
Vale, una cosa que alguien podría decir, bueno, pues lo más sencillo sería intentar renderizarlo, como os dije, ¿no?
De evaluar directamente esta lista.
Vamos a intentarlo.
Vamos a intentar...
Voy a poner aquí un div y vamos a intentar renderizar directamente la lista.
A ver qué es lo que ocurre.
Esto lo vimos ya en una clase, pero lo vamos a volver a revisar.
Recordad, la evaluación es con las llaves.
Así que intentamos evaluar notas y esto ya nos da un pete.
Nos dice, oye, que los objetos no son válidos para renderizar directamente.
Hemos intentado renderizar un objeto, un array que está lleno de objetos.
Y nos dice, mira, hemos encontrado un objeto con esto.
Igual es que estás intentando renderizar una colección, ¿vale?
Así que usa un array en su lugar porque esto no funciona.
Y es que no es capaz de renderizar un objeto.
Podemos renderizar strings, podemos renderizar componentes, elementos, podemos renderizar un booleano,
un array incluso si luego tiene tipos sencillos y no objetos.
Pero en este caso, como intenta renderizar los objetos, no puede.
¿Cómo lo tenemos que hacer?
Tendríamos que utilizar JavaScript, que esto es lo más interesante que tiene justamente JSX, ¿vale?
Que tiene JavaScript puro.
Así que si ya sabes JavaScript, que al final, como dijimos, que se tenía que iterar un array.
Pues sería con el forEach, ¿no?
Dijimos que se tenía que hacer con el forEach.
¿Qué pasa con el forEach?
Vale, cuando dijimos que con el forEach podías iterar una lista,
el problema que tiene en este aspecto es que cuando tú iteras una lista,
el forEach no devuelve nada, no hace un return de ningún valor, ¿vale?
No devuelve ningún valor.
Por lo tanto, lo que hay que hacer es utilizar el map.
¿Por qué?
Porque el map no solo te permite en cada iteración cambiar el valor, transformar el valor, ¿vale?
Mapear justamente es transformar el valor, sino que cuando utilizas el map,
estás devolviendo cada uno de los elementos transformados.
Así que lo que vamos a hacer aquí es ahora pasarle aquí una función,
donde vamos a devolver, aquí le estamos recibiendo como primer parámetro el elemento que estamos iterando
y dentro lo que vamos a hacer es devolver solo, en este caso, el node, que es el objeto, .id.
De esta forma, ¿vale?
Tendríamos el node.id.
O sea, solo estamos devolviendo node.id.
Aquí podemos ver 1, 2, 3.
¿Por qué?
Porque justamente es 1, 1 es la id del 1, el 2 del 2.
Para verlo más claro, en lugar de 1, 2, 3 podría poner aquí 13, 15 y 23, por poner ids diferentes, ¿vale?
Y aquí podemos ver que vuelve nada a aparecer.
Se lee un poco difícil, ¿no?
O sea, esto de hacerlo así no tiene mucho sentido.
Lo mejor es que cuando tú haces este tipo de mapeo que te permite transformar cada elemento,
es aprovechar e incluir JSX dentro.
O sea, aquí cuando hacemos el retur del node.id, podríamos hacer esto, por ejemplo.
Vamos a evaluar el node.id y vamos a hacer que renderice también un párrafo para cada elemento.
Ahora ya tenemos aquí un salto.
Y si mirásemos el HTML, podríamos ver que justamente está renderizando un párrafo.
Con el párrafo igual no queda suficiente, pues vamos a poner también un strong, ¿vale?
Strong para ver que se queda en negrita, ¿vale?
Lo vemos que está en negrita ahora.
Así que estamos iterando el array de las notas y para cada nota lo que estamos diciendo es lo que tiene que renderizar.
Esta sería la forma de renderizar una colección en React.
Pero fíjate, aquí lo podemos complicar todo lo que queramos.
De hecho, aquí vamos a ver qué es lo que dice.
En este caso, lo está renderizando a mano.
Bueno, si no lo quisieras hacer así, esto es la forma correcta.
Vamos a ponerlo aquí en un comentario.
Pero claro, una forma incorrecta sería hacerlo a mano.
Podríamos renderizar cada nota, nodes, acceder a la posición 0 y renderizar la id del 1.
Igual con el 2.
O sea, con el 1, la posición de 0, la 1 y finalmente la 2.
Esta sería la forma incorrecta, ¿no?
Porque no sabemos la nota, las notas, cómo de grande van a ser.
Así que esta sería la forma incorrecta, pero la manual.
Luego, tendríamos que utilizar el map.
Aquí además vemos el problema de que tendríamos que estar repitiendo constantemente cómo renderizarlo, ¿vale?
Así que la forma correcta sería, en lugar de hacerlo así, evaluamos.
Y lo que evaluamos es nodes.map, que lo que sería es transformar cada elemento del array.
Y le pasamos una función que será el callback que se tiene que ejecutar con cada elemento.
Y cada elemento es lo que nos llega como primer parámetro.
Así que tendríamos aquí la nota y le decimos lo que tiene que renderizar para cada elemento.
Así que le decimos la p, strong, y aquí node.id, strong, barra p.
Esto sería lo que queremos renderizar para cada elemento.
Esto lo podemos complicar lo que queramos.
Por ejemplo, esto que aquí devuelva un párrafo, podríamos poner que esto fuese un div.
Y ahora, en lugar de poner el strong node.id y ya está, aquí lo que podríamos hacer, por ejemplo, es poner, que es lo más interesante, poner de la nota el content.
Ahora, que esto no me lo estoy inventando, el .id y el .content, esto es lo que tiene cada objeto, ¿vale?
Este es el .id, .content, el date y el important, ¿vale?
Así que ahí podemos ver justamente donde está saliendo cada una de la información que tenemos en el objeto, ¿vale?
Así que ten en cuenta esto.
Cuando intenta, si yo, por ejemplo, intento acceder node.y pongo aquí, por ejemplo, midu, esto no existe.
Y aquí podemos ver que no se renderiza nada.
Porque es undefined y cuando intenta evaluar undefined, pues no pinta absolutamente nada, ¿vale?
Así que ya tendríamos aquí una forma de renderizar todos los elementos que tuviésemos en las notas.
Vamos a dejarlo de una forma más interesante.
En lugar de mostrar el .id, porque la .id no nos está añadiendo nada, podríamos poner el contenido y a lo mejor aquí podríamos utilizar el time para poner el node.date.
Vamos a dejar con el time y ya estaría.
Ahora, esto lo podríamos dejar así, más o menos, esto lo vamos a poner pequeño.
Vamos a poner los .mall para que quede más claro.
Y esto, esta .p, vamos a darle dos saltos para que quede más separado.
Esto así, ¿vale?
Ya arreglaremos los estilos, lo veremos más adelante.
Pero por ahora lo importante es esto.
Ahora, lo interesante de esto es que si tú aquí tienes un elemento, pues se pintará un elemento.
Si tienes tres, se pintarán tres.
Si no tienes ninguno, no se pintará ninguno, ¿vale?
Esto no peta y no tienes que mirar si no tienes ningún elemento.
Ahora, ¿qué pasa con esto?
Claro, lo importante es que siempre sea un array.
¿Por qué?
Porque si notas, en lugar de un array, ponemos que es un string, bueno, pues no le va a gustar.
¿Por qué?
Porque el string no tiene la función .map.
Esto es un error muy típico en React, ¿vale?
Que nosotros damos por hecho que nos va a llegar un array y resulta que nos llega un false.
Pues este pt es súper, súper, súper, súper, súper típico, ¿ok?
Así que para evitar esto se pueden hacer muchas cosas.
Sobre todo esto suele ocurrir cuando notas es undefined.
Tenemos notas, le podemos poner undefined, que significa que no tiene ningún valor.
Y para evitar esto, una cosa que se puede hacer es antes de recorrerla, revisar si realmente tiene algún valor.
Por ejemplo, podríamos hacer, si notas, si no hay notas, pues entonces devolvemos algo.
Un renderizado condicional, justamente lo que vimos en la clase anterior, ¿vale?
Podríamos devolver lo que queremos renderizar y decir, no tenemos notas que mostrar, ¿vale?
Si no hay notas, pues no tenemos, ¿ves? No tenemos notas que mostrar.
También, obviamente, podríamos hacer más.
O sea, podríamos decir, no tenemos notas que mostrar y además de revisar esto,
podríamos utilizar las condiciones booleanas para revisar más de una cosa, no solo esto.
Podríamos decir aquí, if notes.length es cero, pues lo mismo, no tenemos notas que mostrar.
Obviamente esto no tiene mucho sentido ponerlo dos veces.
Esto sería en el caso de que fuese falsi, es una medio mala práctica.
Lo ideal sería mirar el typeof, ¿vale?
O sea, utilizar un falsi puede ser un poco peligroso.
Lo mejor sería typeof, notes, igual, si esto es undefined,
esto sería la mejor forma de mirar si estás esperando que sea undefined.
Y entonces, si fuese un array vacío, pues no tenemos notas que mostrar.
Vamos a poner, no tenemos notas, solo para que veáis la diferencia, ¿vale?
Guardo los cambios, ¿veis?
Ahora entra, no tenemos notas porque el array es vacío.
Pero en este caso, ya que tenemos esta revisión aquí,
podríamos decir, vale, si el tipo de notas es undefined o el array está vacío
y lo haríamos así, pues ya mostraría esta de aquí, ¿vale?
Ya tendríamos en un mismo if, tendríamos la misma condición tres veces.
Y de esta forma ya lo podríamos evitar, ¿no?
Cuando nos pase el tema del undefined.
Vale, pues con esto voy a darle para atrás
para tener las notas que tenía antes, ¿vale?
Para no, esto os lo dejo un poco como de ver,
es para que empecéis a ver justamente, ¿no?
Cómo podemos hacer este tipo de checks.
Por ahora lo vamos a dejar así, como lo teníamos,
para tener todas las notas disponibles y ya estaría.
Vamos a ver qué más nos cuenta.
Esto de renderizar las notas, bueno, ya hemos visto.
Esto es interesante.
Como os comenté, en las arrow functions,
cuando solo tenemos un parámetro,
esto funciona correctamente, ¿vale?
Esto lo podríamos dejar así y ya está.
Ah, mira, alguien me pregunta, ¿y si es null?
Vale, si es null, pues también tendrías que hacer un check, ¿vale?
Lo he dejado con el if type of, type of, no sé qué,
pero tendrías que mirar también lo del null.
Una forma de hacerlo sería con esto, ¿no?
Esto, esto básicamente, if no nodes,
esto lo que miraría es si es un valor falsy.
Y falsy sería undefined, sería null,
pero también podría ser cero y un string vacío.
No estaría mal, porque la verdad es que nos da igual,
pero es raro, ¿no?
Que recibir un string vacío.
Yo intentaría, por ejemplo, que sea null,
sería una buena práctica,
porque así lo podrías comparar de una forma mucho más sencilla.
Y asegurarte que como mínimo sea null, estaría bien.
Lo mejor de lo mejor, y esta es mi recomendación que os hago
para cualquier estado que tengáis,
es que el estado siempre tenga el mismo tipo de dato.
Por ejemplo, si notas es un array,
pues si no tienes notas, que sea un array vacío, ¿vale?
O sea, si no tienes notas, un array vacío,
que siempre sea del mismo tipo.
No que le pongáis, vale, pues si no tengo notas,
es un false o es un string.
No, si siempre es un array,
pues que si no tienes notas, que sea un array vacío.
Que es por un error el tema que no tienes notas,
pues entonces lo ideal sería traer esos datos de otra forma, ¿vale?
Traerlo con otra prop o de otro sitio.
Pero esta variable siempre que sea un array.
Esto sería una buena práctica.
Evita que tus estados, tus props,
puedan tener tipos de datos distintos, ¿vale?
Porque si no, esto al final te puede costar a la hora
de saber qué datos son los que te van a llegar
y es bastante problemático.
Entonces, ya tenemos aquí nuestras notas
y voy a comentarte cómo podemos mejorar un poquito este código
y hacerlo un poquito más legible.
Como te dije, en una row function,
cuando solo tienes un parámetro,
puedes eliminar estos paréntesis.
Esto funcionaría exactamente igual.
Luego, cuando lo que quieres es justamente devolver
lo primero que tienes aquí,
¿veis que aquí lo primero que tiene el cuerpo de la función
ya es un return?
O sea, ya está devolviendo directamente
lo que tiene la cuerpada de la función.
Lo que puedes hacer es eliminar estas llaves,
esta de aquí y esta de aquí
y eliminar este return.
De esta forma, estaríamos haciendo un return implícito.
Estaríamos diciendo, vale,
ahora igual he liado por aquí porque...
Esto suele pasar, ¿eh?
Cuando quitas un...
Ahora, ya está.
Entonces, puedes ponerle un paréntesis
para que te quede más claro
y esto lo que haría es devolvernos justamente lo primero.
De esta forma se lee un poquito mejor.
Pero a veces incluso lo mejor,
si esto lo veis muy complicado,
que esto lo podemos hacer después,
es extraer incluso esto a un componente.
Luego lo veremos,
que creo que lo veremos mucho más claro.
Ahora, un tema muy importante
cuando se trabaja con listas en React
y es que, de hecho, si veis la consola,
¿veis que aquí tenemos un montón de problemas?
Dice consola 27.
Aquí, bueno, aparte de todo esto,
aquí tenemos un montón de warnings, ¿vale?
Estos problemas de aquí es porque estaba aquí
cuando estaba mal esto de los paréntesis.
Pero este warning y te dice,
cada hijo en una lista debería tener una prop llamada key.
Y te dice, mira el método render de app
y mira, esto es una cosa que está muy bien en React,
que te avisa, mírate la documentación
y aquí te explican exactamente por qué necesitas keys,
qué es esto, ¿vale?
Ya te lo explico yo.
No hace falta ir a esa hora a la documentación.
Ya te lo explico yo.
Las keys.
Esto es un tema muy problemático
y muy interesante en el tema de React.
Y se hace por un tema también de saber React
lo que tiene que guardar en memoria
cuando estás renderizando una lista
y evitar colisiones de diferente tipo.
Lo importante que tienes que saber
es que cuando tú haces esta operación
de iterar una lista de elementos
y renderizar cada elemento,
tienes que indicar cada cosa que renderizas
en el hijo, en el primer elemento que estás renderizando.
En este caso sería en el div.
Pero si imagínate que no tenemos un div,
tenemos otra cosa.
Tenemos un span, pues sería en el span.
Pero pongamos en el div.
Tenemos que indicarle una prop llamada key.
Esto es algo totalmente interno de React.
Y esta key tiene que tener un identificador único.
¿Vale?
Un identificador único.
¿Qué quiere decir esto de un identificador único?
Es que si yo le pongo aquí el 1,
pues entonces se va a volver a quejar.
Dice, oye, he encontrado dos hijos
que tienen la misma key.
¿Por qué?
Porque esto se está iterando
y le he dicho que cada elemento tiene la key 1.
Y esto dice, no, no, no.
Esto no me gusta.
Entonces alguien puede decir, bueno,
pues pon un más random y se acabó el problema.
¿Vale?
Entonces si guardamos los cambios
y refrescamos aquí, pues se acabó el problema.
Ya está.
No tiene ningún problema.
¿Qué pasa?
¿Qué pasa con esto?
¿Para qué se utiliza la key?
La key se está utilizando en realidad
para darle una pista a React
que lo que hace es que cada vez que se renderiza esta app
tenga que hacer el mínimo trabajo posible
y saber dónde tiene que conservar ese componente
cuando está haciendo la iteración.
Ahora, el problema es que si tú haces un más random,
cada vez que se ejecuta este componente,
cada vez que se renderiza,
la key es diferente.
Por lo tanto,
esa mejora de performance,
lo que está haciendo,
la está perdiendo totalmente.
Y de hecho esto es bastante problemático.
Esto también es una mala práctica.
Entonces alguien puede decir, vale,
pues ¿por qué no utilizas el map?
Aquí tienes un segundo parámetro
que es el índice.
Entonces, ¿por qué no utilizas el índice?
Bueno, pues el índice también es una mala práctica.
Y ahora te voy a explicar por qué.
Hay que intentar, aunque funciona, ¿vale?
O sea, te está eliminando el warning.
Lo importante aquí, pues ya no tendríamos warning.
¿Por qué es una mala práctica esto?
Porque en realidad el índice
no está haciendo este elemento único.
En este caso sí, ¿no?
Porque total, no estamos haciendo absolutamente nada.
Se va a renderizar siempre y tal.
Pero imagínate que tuviésemos un botón aquí,
aquí, que pudiéramos eliminar esta nota.
Entonces el índice que tenía esta nota
pasaría al siguiente.
Por lo tanto, habría como una colisión
de que ese identificador
ahora la utiliza otro elemento que es diferente.
Por eso el índice no es bueno.
Incluso si lo pudieses añadir
y se añada delante de este, ¿vale?
Al final sería una mala práctica.
Entonces, la mejor práctica, siempre que se pueda,
sería tener un identificador único.
Como aquí ya tenemos un identificador único
que es justamente la ID.
Aquí tenemos la ID.
Se supone que es un identificador único, ¿vale?
Se supone.
¿Por qué digo se supone?
¿Veis? Ahora funciona bien.
¿Por qué digo se supone?
Porque hay veces que a lo mejor
si yo tengo aquí que hay dos 15s y 10 15s,
¿veis que se vuelve a quejar?
Oye, he encontrado dos children
que tienen la misma ID 15
y tienen que ser únicas
para mantener su identidad.
Pues aquí tendríamos otra vez el problema.
Así que el tema es que tienes que asegurarte
que es una ID única.
Hay otras formas de hacer esto, ¿vale?
Por ejemplo, React tiene un método
que te puede transformar los hijos
utilizando un array
y te indica una key automáticamente.
Mi consejo es siempre que se pueda utilizar
este tipo de ID
que normalmente en base de datos
te suele dar una ID única.
De hecho, esto puede ayudarte bastante
porque suele ser un smell
de que algo no estás haciendo mal
si no tienes una ID única
sobre lo que estás pintando e iterando, ¿vale?
Así que hay gente que me puede decir
bueno, pero es que quiero pintar
una lista de enlaces.
Por ejemplo, tengo una lista de enlaces href.
Pues el href podría ser, por ejemplo, una ID.
Aquí puedes, como ID, como key,
puedes utilizar strings,
puedes utilizar números,
puedes utilizar un montón de cosas, ¿vale?
Lo importante es que tengas claro
para qué sirve
y evitarte los problemas.
Tanto el math random,
intentar evitar el array,
el index del array, ¿vale?
Así que eso sería.
Ahora, que no puedes,
pues a veces el index del array
puede ser una buena solución.
¿Que tampoco puedes?
Pues hay veces que puedes utilizar
proyectos como nanoID
para que te creen IDs únicas
de tus elementos
y que no tengan ningún tipo de colisión.
Pero como te digo,
esto tiene que ser el tanto por ciento
a las veces muy chiquitita,
muy chiquitita.
Lo más importante,
ID única
y normalmente es algo
que te tiene que venir ya del servidor, ¿vale?
Vale, vamos a ver
qué más cositas tenemos por aquí.
Mira, hay una cosa
que se utiliza muy poco
y la verdad es que deberíais
utilizarlo lo mínimo posible,
si puede ser.
Y es que podéis,
como podéis ver aquí,
poder renderizar un array
de elementos.
Esto normalmente es evitable
y se puede evitar
de forma sencilla, ¿vale?
Porque, por ejemplo,
tú puedes, aquí,
podríamos renderizar un array
directamente
y en lugar de hacer un div,
pues renderizar un array.
Pero sí lo puedes evitar
porque se suele entender menos.
Utiliza siempre que pueda JSX
de esta forma
y de esta forma
es mucho más legible
como queda tu componente, ¿vale?
Esto es lo que hemos visto.
Justamente, ¿veis?
Aquí está haciendo el retorno implícito
para que quede más limpio.
Esta es una forma
que se suele ver mucho.
Por ejemplo,
en este caso hemos puesto un div,
pero semánticamente
lo mejor sería poner
una lista de elementos
desordenada, ul
y aquí dentro
en lugar de utilizar el div,
utilizar un li, ¿no?
Y así tendríamos ya
nuestra lista de elementos.
Aquí podemos ver
que tenemos la lista.
Podríamos hacer
que fuese ordenada
por X motivo.
Decimos, no,
es que queremos que ver
el 1, 2, 3.
Pues lo hacemos así, ¿veis?
Ya teníamos 1,
el 2 y el 3.
Ya teníamos la lista de notas
de esta forma.
Así que de esta forma
podemos ver
que hacemos los cambios fácilmente
y desde un solo sitio.
¿Veis?
Aquí nos está explicando
lo del key attribute.
Otra cosa interesante
es que cuando hablamos
del map,
como veis aquí
estamos transformando
un montón de cosas.
Así que aquí podéis
hacer lo que queráis.
O sea,
podríamos, por ejemplo,
transformar este date
en lugar de mostrar
así esta fecha,
mostrarla de otra forma.
Al final podéis transformar
los datos
de cada elemento.
Así que aprovechad
esa potencia
que os da justamente
para transformarla.
¿Qué más?
¿Qué más estamos haciendo?
Mira,
aquí habla del antipattern,
justamente utilizar
los indexes como keys.
A veces no hay más remedio
y si no hay más remedio
pues mientras controles,
por ejemplo,
si tienes clarísimo
que esta lista
nunca va a cambiar
su orden
o por ejemplo
se va a añadir
una nota en medio
o se va a eliminar
una y tal,
a veces no pasa nada
si utilizas el índice.
Pero que sepas
lo que estás haciendo.
¿Vale?
Al final ese identificador
tiene que ser
totalmente único.
Súper importante.
¿Vale?
Mira,
pues aquí como
está comentando una cosa
que me parece interesante
lo vamos a ver.
Como os he dicho,
esto se suele ver un montón
pero lo mejor
obviamente
sería tener
un componente node
ya hemos visto
cómo se hacen las notas
o sea,
cómo se hacen los componentes
en React
así que lo vamos a hacer fácilmente.
Esto lo podríamos extraer aquí.
Haríamos esto
y ahora
esta nota
se la pasaríamos
como prop
y este node
lo podríamos utilizar
directamente aquí
de forma que recibe node
y ahora vamos a ver
cómo podemos pasarle
todas las props.
Por ahora lo vamos a hacer
como ya sabíamos
o sea,
le vamos a pasar
por un lado la idea
y bueno,
le podemos pasar
toda la nota
por ahora.
¿Vale?
Pero ahora veremos
diferentes cosas
que podemos hacer aquí.
Vamos a eliminar esto
porque ahora tenemos
un componente
que justamente hace
todo lo que hacía antes.
Vamos a dejarlo
con el paréntesis
porque a mí me parece
más legible
y esto nos ayuda
a entender mejor
qué hace este componente.
Ahora todo esto
ya no es necesario.
Ahora simplemente
y ahora en una sola línea
tendríamos
lo que renderizábamos antes.
Mucho mejor, ¿no?
Hemos extraído
en un componente
todo el tema
de la nota
y ahora en este esto
es un componente
que solo renderiza
justamente esto.
¿Vale?
Solo la nota.
Ahora se lee mucho mejor
y no tienes que mezclar
tanta cosa.
Lo que está pasando aquí
es que le estamos pasando
toda la nota.
¿Ves?
Node
le estamos pasando
el objeto entero.
¿Qué es lo que está llegando?
Cada uno de estos objetos.
Esto le está llegando aquí.
De hecho,
lo podemos hacer
con un console.log
y ver lo que le está llegando
a cada uno.
Vamos a guardar los cambios
y mira,
aquí en la consola
aquí,
¿ves?
Le están llegando
tres objetos
cada uno de los elementos.
Este,
que sería el primero,
el 15,
que es este,
el tercero,
que es este.
Vale.
Entonces,
esto no suele estar mal
del todo.
No suele estar mal.
¿Por qué?
Porque, bueno,
le estamos enviando
el objeto completo
y ya está.
Pero una buena práctica
a la hora de trabajar
con componentes en React
es enviar
el mínimo número
de props necesario.
Por ejemplo,
aquí lo ideal
sería en realidad
pasarle la id,
el contenido
y la fecha.
Y esto,
directamente,
en lugar de utilizar
Node,
pues esto ya sería
anóstico,
porque ya es el componente Node.
Es un poco raro
tener que pasarle
también el objeto entero
de la nota.
¿Y cómo haríamos esto?
Bueno,
pues aquí hay diferentes opciones.
Una podría ser,
vale,
pues como id.
Y ahora vais a ver
un tema importante
con la key,
¿vale?
La id sería
Node.id,
luego el content
sería
Node.content
y el date
sería
Node.date.
Vale.
Si guardamos los cambios,
fíjate que yo aquí
en Node
tengo la key
y esto está funcionando bien,
pero me está dando
otra vez el error,
me está dando otra vez
el warning.
¿Por qué?
¿Por qué?
Me está dando otra vez
el warning.
Bueno,
porque en realidad
la key no tiene que estar aquí.
Aquí no.
Tiene que estar en el lugar
donde estés iterando
la lista de elementos,
¿vale?
Aquí,
por ejemplo.
Entonces,
aquí es donde tienes que tenerla aquí.
Aquí es donde tienes que indicar
dónde está la key.
¿Vale?
Es donde estás iterando los elementos,
no aquí en el componente.
Esto es súper importante
y hay veces que también
se nos está olvidando.
Ahora,
una forma
que mucha gente
le gusta trabajar
con los componentes
es pasar
todos los valores
que tiene el objeto.
Por ejemplo,
aquí podríamos hacer esto.
Podríamos pasarle
el objeto entero,
pero que solo le pase
las propiedades.
Para eso,
utilizamos esto,
las llaves para evaluar
y lo que vamos a utilizar
es el spread operator,
que ya lo hemos visto
en alguna clase.
Así que,
le pasamos nota
y lo que estamos haciendo aquí
es,
vale,
del objeto nota,
pásale la idea,
el content,
el date
y él importa.
¿Vale?
Solo está pasando todo.
Y esto funciona.
Bueno,
aquí sale en rojo
por los errores
que hemos visto antes,
pero funciona.
Si rechamos,
funciona,
bueno,
ahora tenemos lo del aquí
porque no estamos pasándolo aquí.
Importante.
¿Ves?
Esto,
hay que pasarse la mano.
Esto sí que para no ser...
Vale.
Esto funcionar funciona
y hay veces
que te puede quitar código,
pero
no es...
A ver,
puede estar bien
y puede funcionar,
pero a veces puede ser
una mala práctica.
¿Por qué?
Por un lado,
no sabes,
no estás controlando
lo que le estás pasando
al componente,
por ejemplo,
aquí en Node
y más adelante veremos
que hay técnicas
para evitar
que un componente
se vuelva a renderizar.
Entonces,
si tú no controlas
las props
que le estás pasando
a ese componente,
por ejemplo,
aquí le está llegando
important,
pero no lo estamos viendo aquí
y sin querer
a lo mejor
ese important
está cambiando
y está volviendo a hacer
que se rendericen cosas
por debajo
de tu árbol de elementos
y no lo estás controlando,
¿vale?
Entonces,
suele ser mala práctica
porque estás perdiendo
de alguna forma
el control
de lo que le está llegando
a tu componente.
Entonces,
y puede haber problemas mayores,
por ejemplo,
si este objeto
a su vez tuviese un objeto.
Podría ser problemático
que hicieses esto
si al final
lo que hace es otra copia
y cosas así.
No está mal
que funcione así,
¿vale?
Y esto os puede quitar
bastante código,
pero como siempre
es importante entender
lo que está ocurriendo
para si alguna vez
tienes un problema
pues veas,
ostras,
que esto no está funcionando bien,
¿por qué se está renderizando
otra vez este componente?
Si yo solo utilizo
el content y el date
y esto no está pasando nada
y tal, ¿no?
Pues para que lo sepas.
Esto a veces puede ser
interesante
de que si te hace
una nueva copia de algo
en el useEffect
que veremos más adelante,
pues se te cuela.
Pero bueno,
no nos adelantemos.
El tema
es que hasta aquí
ya hemos extraído esto
y ya lo tenemos.
Ahora,
lo interesante,
esto lo hemos visto
en realidad
en alguna clase ya.
Claro,
no es lo ideal
empezar a crear componentes
y tenerlos en el mismo fichero.
Lo podemos extraer
a un fichero,
¿vale?
Y podemos trabajar
con lo que se llaman
módulos.
Podemos crear un nuevo fichero
que le vamos a llamar
node.js.
Aquí vamos a copiar
nuestro componente
y lo que vamos a hacer
es exportarlo.
Hay dos formas
de exportar
los componentes
o cualquier fichero
en JavaScript.
En uno sería
lo que se llama
por defecto,
que sería decir
este fichero
exporta
por defecto
el componente
node.
De forma que
si lo quieres
importar,
lo único que tenemos
que hacer es utilizar
el import,
ponerle el nombre
que queramos
y decirle
dónde tiene que
traer este módulo.
A esto se le llaman
módulos
porque podemos
importar los módulos
y funcionaría.
Estamos exportando
el módulo
por defecto
node
y aquí podemos poner
el nombre
que queramos
porque como es el módulo
que se está exportando
por defecto,
pues lo importamos
con el nombre
que queramos.
Yo le he puesto
node
porque es lo que tiene sentido,
pero lo podría llamar
pepito
y ahora pepito
obviamente
tenemos que utilizarlo aquí
y esto funcionaría.
Pero entonces
hay otra forma.
Al final un módulo
puede exportar
más de un módulo
a la vez.
Por defecto
puede exportar
una cosa
pero podríamos
exportarlo también
de forma que se llama
nombrada.
¿Por qué nombrada?
Porque le estamos
exportando con un nombre.
¿Veis aquí
que pongo
export const node?
Estoy exportando
directamente esta constante.
Esto es porque
lo estamos exportando
con este nombre
en concreto.
Así que si lo queremos
utilizar
y además fíjate
que estamos exportando
uno por defecto
y otro nombrado.
Se puede exportar
en los módulos
más de una cosa.
Así que cuando lo hacemos
nombrado
esto si vamos a quitar
esta línea
para solo exportar
una cosa.
Ahora veis
se está quejando
porque no está encontrando
el módulo que teníamos aquí.
Ahora si yo aquí pongo
node
esto va a accionar
porque no encuentra
este módulo.
No lo está encontrando.
¿Por qué?
Porque ahora tiene
un nombre en concreto.
Para utilizar
el módulo nombrado
que estamos exportando
aquí
tenemos que utilizar
las llaves
y decirle
extraeme
el módulo
node.
¿Vale?
Le tienes que decir
el nombre
y ahora sí que está funcionando.
Si yo aquí
le pongo cualquier nombre
el problema es que
este nombre
no lo estamos exportando
aquí.
¿Veis?
Aquí ahora
estamos exportando
un módulo nombrado.
No veis aquí
nada de default
ni nada.
Por lo tanto
si no veis
un default
tenéis que importarlo
de esta forma
con el nombre
que se está exportando.
Entonces
hay veces que hay gente
que puede tener
bastantes problemas
de cuándo utilizar
uno u otro.
¿Vale?
Mira alguien me dice
en el chat
que se podría cambiar
el nombre.
Cuando es nombrado
le puedes cambiar
el nombre
pero siempre estás
obligado a poner
su nombre.
¿Vale?
Aquí le podríamos
cambiar el nombre
y decirle
extrae node
como pepito
y le puedes cambiar
el nombre.
¿Vale?
Y entonces utilizarlo
como pepito.
Pero es diferente
a lo que hemos visto antes
porque te obliga
a saber el nombre.
¿Ok?
Al menos una vez.
Esa es la diferencia.
Con el módulo
por defecto
puedes ponerle
el nombre
de primeras
que quieras.
¿Vale?
Entonces
hay gente que dice
bueno pero ¿cuál utilizo
uno u otro?
¿Cuál es el mejor?
Todo tiene sus cosas buenas
y sus cosas malas.
¿Vale?
Por ejemplo
el por defecto
tiene la ventaja
de que es mucho más sencillo
no tiene necesidad
de saber
cuál es justamente
el nombre
que tiene
y le puedes poner
al que quieras.
Pero
su problema
es que como le puedes poner
el nombre que quieras
en todos los archivos
en un sitio
le puedes llamar
note
en otro
le puedes llamar notes
en otro
le puedes llamar notes
te puedes equivocar
y le puedes ponerles una D
en otro lo puedes hacer
en minúscula
eso es un problema
¿vale?
Porque no estás
utilizando la misma regla
en todos tus ficheros.
Entonces
normalmente
puede ser una buena
pregunta
hacerlo de forma nombrada
porque
así
siempre te aseguras
que cuando extraigas
este módulo note
en todos los ficheros
de tu aplicación
siempre los vas a extraer igual
y no vas a tener
ningún problema
sobre cómo
se está extrayendo
claro
esto tiene su desventaja
que si le cambias
el nombre
a este módulo
lo tendrías que cambiar
en todos aquellos ficheros
donde lo has usado
¿veis?
Todo tiene sus ventajas
y sus desventajas
pero al final
yo creo que una buena práctica
sería
por ahora
sobre todo
si estás empezando
yo creo que lo mejor
es que utilices siempre
el nombrado
siempre
siempre que puedas
y siempre que tengas sentido
siempre el nombrado
como prioridad
¿vale?
el nombrado
¿por qué?
porque de esta forma
te va a ayudar a entender
qué es lo que está ocurriendo
en todo momento
esto funciona obviamente
con componentes
pero funciona también
con métodos
con cualquier cosa
aquí podríamos exportar
por ejemplo
get number
y que esto devuelva un número
pues esto
también lo podemos importar aquí
ahora de aquí
podríamos exportar también
el get number
y aquí llamar al get number
y ya estaría
ya así
es como funcionan los módulos
en javascript
y es así de sencillo
así que lo mejor
yo creo
sobre todo para empezar
es utilizar esto
más adelante
veremos que a lo mejor
los export default
tienen un sentido
en un tema en concreto
¿vale?
para simplificar
ciertas apps y tal
pero por ahora
quédate con lo que hemos comentado
¿vale?
con los módulos
ahora
hay un tema aquí interesante
es una tontería
¿no?
pero habla de esto
de cuando se rompe la aplicación
¿no?
que son los errores
que hemos visto antes
que hemos visto algunos errores
de que petaba la aplicación
de dónde sale esto
y tal
por ejemplo
lo que hemos visto antes
¿no?
cuando nodes
esto pues era undefined
yo que sé
undefined
¿no?
y esto petaba
y tal
una cosa que se puede hacer
normalmente
y esto
cuanto más experto eres
pues más utilizas
son los console.log
¿vale?
que sí
que son lo más típico
del mundo
y tal
entonces
una cosa que explica
que me parece interesante
es sobre todo
es con las props
vamos a intentar
aquí no lo vamos a hacer
lo vamos a hacer
en el otro
que tiene más sentido
el nodes
¿vale?
vamos a dejar esto
y aquí
tendríamos props
por ejemplo
¿no?
props
y en props
podemos extraer
el content
y el date
esto es como se extrae
la desestructuración
que hemos visto
en otra clase
¿vale?
entonces
hay veces
que quieres poner
un console.log
para ver
qué trae las props
y mucha gente dice
a ver props
y hace
más props
hace esto
¿vale?
para ver
justamente
para concatenar
y entonces
le pasa esto
¿no?
object object
bueno
una cosa interesante
aquí es que
en lugar de concatenar
que si pones
una coma
ya entonces
sí que vas a poder
ver las props
¿vale?
para que lo tengas en cuenta
normalmente
la mejor práctica
para evitar hacer esto
es directamente
utilizar el objeto
y poner así
props
de esta forma
fácilmente
vas a localizar
en la consola
qué es lo que quieres
loggear
que es props
le das
y ya tienes el objeto
aquí
¿vale?
y esto veremos
que es una técnica
que se utiliza un montón
y que te puede ayudar
a debugar súper fácil
otra
como ya hemos visto
en otra clase
es poner el debugger
esperar ahí
y ver lo que tiene
cada cosa
y ya está
pero bueno
para que tengas en cuenta
que si intentas concatenar
puede ser que veas
el object object
y te vas a volver loco
así que eso te puede pasar
con las props
y con el objeto
en cualquier sitio
¿vale?
pues con esto
tendríamos la parte
de renderizar
la lista de elementos
¿vale?
aquí tendríais
los ejercicios
que os recomiendo
un montón que lo hagáis
que al final
son ejercicios muy parecidos
a lo que acabamos de hacer
pero pasándole cursos
y veis aquí
que está pasando
directamente el curso
pues aquí podéis jugar
¿no?
de pasarle cada prop
de forma separada
y ya está
así que ahí os dejo
este ejercicio
vamos a pasar
a la parte de formularios
pero antes
voy a leeros
un poquito
a ver que me estáis comentando
y si tenéis alguna duda
rápidamente
antes de pasar
a la parte de formularios
para que la revisemos
vamos a ver
hay gente que dice
que los pros
usan console.table
es una forma
¿vale?
no solo existe
console.log
sino que la consola
tiene un montón
de métodos
a ver
tengo un artículo
que os recomiendo
si os interesa
de cómo podéis
utilizar la consola mejor
que es este
que os lo voy a dejar
en el chat
que es
todos los métodos
que tenéis en la consola
para el .info
.word
.error
.table
.time
.time
.time
hay un montón
la consola en realidad
no solo tiene el console.log
así que bueno
os dejo por ahí
el tema
por si os interesa
¿vale?
¿se puede aceptar
los avisos del ID
de import sin usar?
se puede
pero creo que
también es mala práctica
si no estás utilizando
un import
lo mejor que puedes hacer
es comentarlo
como mínimo
¿es mala práctica
enviarle una red
con las propiedades
del objeto
y desestructurarlo
en el componente?
depende de un montón
de cosas
al final
vosotros podéis hacer
lo que
he quitado esto
y os quería enseñar
podéis hacer lo que queráis
por ejemplo
aquí en este tema
aquí
podríais tener también
un componente
llamado
nodes
en general
y que lo que haga
es renderizar esto
y pasarle todas las notas
que tenga que renderizar
no estaría mal
al final depende
en realidad
la carga que haga
cada componente
¿vale?
¿qué más?
no he solucionado
sí que he solucionado
a medias
me pregunta Pablo
si he solucionado
un problema
que tenía node
y bigsor
lo he solucionado
a medias
¿vale?
pero al final
todavía no me funciona
del todo bien
a veces
¿por qué se usa const
para funciones
en vez de function
la mayoría de las veces?
perdón
no lo he explicado
redo
pero te lo explico
a ver
en realidad
esto lo hemos dicho
en alguna clase
esta función
de aquí
la podríamos escribir
también así
¿vale?
la podríamos escribir así
y esto que devolviese en 2
en este caso
en las funciones
que son muy cortas
igual
bueno de hecho
esto para que fuese
exactamente igual
sería así
¿vale?
las funciones cortas
pues con
la arrow function
que es esta forma
suele quedar bastante mejor
pero si es una declaración
lo puedes hacer así
esto tiene algunas ventajas
y esta tiene otras
al final
es la que más te guste
a mí de hecho
me gusta más
la de abajo normalmente
para diferenciar fácilmente
que es un componente
que hace lo otro y tal
pero es indiferente
o sea
a no ser que quieras
hacer en una sola línea
que solo lo vas a poder hacer así
porque en esta
quedaría horrible
que sería hacerlo así
y queda bastante mal
pero bueno
y tiene algunas diferencias
también sobre el scope
y tal
pero que no vamos a entrar aquí
¿ok?
sobre utilizar prop types
pues
sí
sería una buena solución
no creo que lo veamos
pero bueno
sí que
yo lo recomiendo
sobre todo si no utilizáis
TypeScript
que puede estar bastante bien
¿vale?
al usar el export
al importar
ya sea una variable
o una función
¿se puede decir que se aplica
a la estructuración?
hombre Andrés
yo diría que no
porque no es una desestructuración
como tal
al final es
importar un módulo
pero es verdad
que la sintaxis
es la misma
pero no es
lo que está ocurriendo
no es exactamente lo mismo
pero bueno
si lo quieres ver así
tampoco me parecería
tan grave
¿vale?
si en un array
además de objeto
tienes un elemento array
¿cómo lo imprimirías?
Elena
pues exactamente igual
al final es cuestión
de ir entrando
o sea aquí podrías tener
users
o yo que sé
¿cómo le podríamos poner?
categories
¿no?
y podríamos tener
un, dos, tres
a ver
podrían ser categorías
que fuesen strings
¿no?
sports
hobby
pues al final
este nodes
tienes la propiedad
categories
¿no?
pues aquí
en node
le está llegando
categories
y aquí en node
podríamos hacer
si tenemos
vamos a extraer
categories
y exactamente
lo mismo
categories
mira
y os voy a enseñar una cosa
que esto sí que es interesante
¿vale?
mira
porque esto va a petar
¿vale?
category
category
esto lo mismo
¿no?
pues queremos renderizar
todas categorías
y tal
y para cada categoría
pues vamos a poner
por ejemplo
un small
con el category
porque es un string
directamente
esto va a petar ahora
¿vale?
peta
¿por qué?
por lo mismo
¿vale?
esto al final
es como nos queramos
complicar la cosa
porque categories
existe aquí
pero aquí no existe
obviamente
podríamos poner categories
y arreglarlo
pero
otra cosa
que podemos hacer
es que en este caso
yo sé que no existe
por lo tanto
es undefined
una forma
es que bueno
categories
como valor por defecto
si no viene
es un array vacío
de esta forma
ahora sí que me funciona
pero ahora se queja
de la key
bueno pues de la key
justamente
¿qué podría ser la key?
pues la propia category
porque la category
es un string
y el string
no se va a repetir
no se debería repetir
no deberíamos tener aquí
dos veces sports
no tendría sentido
¿vale?
si no nuestra API está mal
entonces
una vez que lo tenemos así
ahora
pues ves
ya no tenemos el problema
de la key
que estamos utilizando
el string
porque es único
y además
lo que estamos haciendo
pues es un renderizado
de la lista
y ya lo tendríamos
category
punto
¿vale?
¿por qué se retorna
el componente
entre paréntesis
y no con llaves?
eso
de retornarlo
con esto
es porque
lo que estamos haciendo
es devolver
la que se evalúa aquí
podríamos quitar
los paréntesis
pero se lee un poco peor
de hecho
cuando guardo
me los añade
al final
lo que significa
es esto
es devolver
exactamente esto
pero cuando guardo
ves que me añade
los paréntesis
por los paréntesis
evalúa lo que hay
dentro de los paréntesis
si pongo las llaves
esto no va a renderizar nada
porque no estamos
haciendo un retorn
¿ves?
de hecho se queja
dice oye
que aquí no estás haciendo nada
tendría que añadir el retorn
entonces por eso
lo hacemos así
¿vale?
con los paréntesis
¿vale?
¿no es mejor definir
default values?
default props
no
no utilicéis default props
no las he explicado
pero no las vamos a explicar
en el curso
porque las default props
ya no tienen sentido
¿vale?
están totalmente deprecadas
y no tienen sentido
y si queréis en otro live
lo podemos explicar
porque esto puede estar
un montón de tiempo
pero
utilizar siempre
los default values
¿vale?
no utilicéis ya default props
porque no tienen sentido
en este caso
default value
esto es una forma
de decirle
si categories
es undefined
ponme como valor inicial
un array vacío
y de esta forma
ya lo habéis arreglado
¿vale?
y ya tendríamos esto
poderizado
¿vale?
pues yo creo que
podemos pasar ¿no?
ya a los formularios
venga
eh
la mejor
alguien me pregunta
si un for
en vez de un map
eh no
al final lo importante
yo os recomiendo
que utilicéis un map
porque el map
es el que devuelve
en cada iteración
y es mucho más fácil
de leer
así que
esta es la forma correcta
de hacerlo
utilizar un for
no tiene sentido
y en este caso
no solo por legibilidad
sino que os podría dar
un montón de problemas
tendríais que hacerlo
de otra forma
o guardarlo en una variable
y evaluar
no vale la pena
¿vale?
no os preocupéis
por la optimización
esto ya os digo
que es lo suficientemente óptimo
y vuestro problema
no es utilizar for
o utilizar map
o no
utilizad un map
porque es la forma correcta
ideal en este sentido
vale
pues vamos con los formularios
vale
tenemos nuestras notas
vamos a poner aquí
un h1
vamos a poner
vamos a hacer como
una aplicación de notas
al final
vale
así que
vamos a poner aquí
un dip
para que nuestra aplicación
ya sabéis que tiene que devolver siempre
un solo hijo
que vale
pues tenemos notas
estas serían nuestras notas
y lo que nos está diciendo
es que podemos tener aquí
pues nada
un
un estado
porque esto le puede llegar
por props
en este caso ahora
no está llegando por props
pero vamos a hacer que le llegue por props
estas notas
vale
vamos a hacer que estas notas
le llegue por props
y de esto
pues igual
podemos hacer que las notas
por defecto
sea una rey vacío
de esta forma
no nos petaría nuestra aplicación
ahora
como le pasamos por props
a la app
las notas
pues lo que tenemos que hacer
es ir al punto de entrada
de nuestra aplicación
y aquí tendríamos las notas
esto luego lo arreglaremos
vale
esto no es una aplicación
estamos iterando la aplicación
y poco a poco iremos viendo
como lo hacemos
vale
voy a quitar este strict mode
que ya os expliqué
para que sirve
pero que ahora mismo
no necesitamos
y no lo vamos a explicar
ahora
y a la app aquí
pues igual
le pasamos una prop
que serían notes
y le pasamos las notas
vale
ahora
tenemos
perfecto
entonces lo que nos está
podemos hacer
porque queremos justamente
ir añadiendo notas
a nuestra aplicación
pues lo que vamos a hacer aquí
es tener un estado
esto lo vimos en la clase anterior
vale
utilizamos el useState
y le decimos
cuál es el estado inicial
el useState
lo tenemos que sacar
de React
que es un hook
el useState
que nos permite
tener estado
nuestro componente
y si no sabes
que es el estado
como y tal
a ver
más o menos
te puedes quedar
e ir entendiendo
pero puedes revisar
la clase anterior
que hicimos
que la tienes
en mi canal de YouTube
ahora
cuál va a ser el estado
pues vamos a poner
por ejemplo
¿cómo le llaman aquí?
aquí le llaman notes
vale
porque las props
las sacan
de otra forma
aquí están sacando props
entonces
hacen notes
y set notes
vale
el useState
devuelve un array
de dos posiciones
la primera es el estado
con todas las notas
y el segundo
una forma de actualizar
estas notas
porque lo que vamos a querer
es ir añadiendo notas
y el useState
como valor inicial
y esto no lo vimos
en la clase anterior
pero lo voy a explicar ahora
podemos utilizar
algo que llegue por props
de forma que este estado inicial
se va a inicializar
con lo que le está llegando
por props
y le está pasando
como estado inicial
todas estas notas
así que este va a ser
el estado inicial
de nuestra aplicación
vale
vamos a guardar los cambios
y por ahora
pues no vemos ningún cambio
o sea
estamos renderizando
directamente notes
y ya estaría
ahora
lo que vamos a querer
justamente es añadir
nuevas notas
vamos a hacer algo
bueno voy a ver
si es lo primero que hacen
aquí
vale
sí
añadir notas
vale
la forma correcta
de añadir notas
sería con un formulario
pero vamos a hacerlo
poco a poco
vale
vamos a hacer un input
que sea type text
y aquí vamos a poner
por ahora
que tenga
vamos a dejarlo así vacío
para que aparezca
vale
tendríamos esto aquí
y vamos a poner
que esto esté en un div
porque os voy a enseñar
la forma correcta
que
y la incorrecta
que mucha gente lo hace
vale
crear nota
vale
mira
aquí tendríamos
voy a poner aquí también
un
esto lo voy a sacar de aquí
que no tiene sentido
que esté dentro de la lista
lo saco aquí
ahora sí
vale
y aquí podría crear una nota
con un contenido
con lo que sea
vale
entonces yo le daría aquí
y me añadiría una nota
¿cómo podemos hacer esto?
ya vimos el evento
onclick
pues ahora podemos hacer
uno nuevo
vamos a crear aquí
new note
y set new note
y esta nueva nota
por ahora
es un string vacío
¿cómo hacemos?
guardamos
este valor de aquí
vale
una forma de hacerlo
que esto sí que lo
sí que lo vimos
es que podríamos hacer
onclick
onchange
y todo esto
un evento
para este input
sería el onchange
y podríamos pasarle
un método
de forma que
cada vez que cambie
el valor del input
se ejecute
vamos a llamarle
handlechange
y aquí
vamos a ejecutar
este método
y vamos a poner aquí
un console.log
y este handlechange
lo ejecutamos aquí
¿vale?
cada vez que cambia
el valor aquí
se va a ejecutar
el método
yo ejecuto
¿veis?
change
change
una forma de tener esto
sería pasándole el evento
aquí ya os dije
que le recibía el evento
de cada uno
de los
cuando hacemos un onchange
onclick
o lo que sea
y este evento
pues tiene información
¿vale?
vamos a hacer el truco este
que hemos visto antes
de poner evento
bueno vamos a llamarle event
que tiene más sentido en inglés
event
con el console.log
y ahora
cuando aquí cambiamos
¿veis?
tenemos event
event
una cosa que podríamos
recuperar aquí
el evento
tiene un montón de información
y hay una
que debería ser
el target
¿vale?
¿veis?
el target
el target
es el elemento
que tenemos aquí
así que podríamos tener
event
punto target
y el target
el elemento del DOM
tiene un campo especial
que se llama punto value
esto no es un tema de React
ni de JavaScript
ni siquiera
esto es un tema del DOM
¿vale?
del evento
el elemento
que está recibiendo
el evento
extrae el value
esto funciona
con los inputs
¿vale?
así que ahora aquí
si yo ahora
voy escribiendo aquí
voy a
voy escribiendo aquí
puedes ver que
si yo pongo
midu dev
pues cada vez
que ha cambiado
el valor dentro del input
se ha ejecutado
esta función de aquí
y al final
tengo este midu dev
¿vale?
perfecto
o sea ya tengo una forma
de recuperar
lo que tenemos
dentro del input
pues esto
vamos a ponerlo aquí
new node
antes había creado un estado
pero por ahora
no lo vamos a hacerlo
con estado
¿vale?
vamos a hacerlo de esta forma
ahora con este new node
¿qué debería hacer?
pues lo que debería hacer
es que cuando le de a este botón
de crear nota
debería crear la nueva nota
¿no?
así que este botón
también deberíamos añadirle
un on click
y hacemos aquí un handle click
y creamos otro método
handle click
que aquí tenemos el evento
y hacemos esto
y aquí crear nota
crear nota
vale
pero aquí tenemos un problema
¿verdad?
yo voy a
yo voy haciéndole a esto
voy creando
bueno
voy a poniendo aquí
console.log
del new node
¿vale?
yo voy escribiendo aquí
y ahora le doy aquí
a crear nota
y vale
sí
tengo que crear nota
pero ¿cómo aquí
accedo
a la información
que tengo aquí?
¿cómo lo hago?
¿cómo puedo hacer esto?
porque claro
esto no puedo acceder ahora
a esta constante
que tengo aquí
acceder aquí
entonces podrías pensar
en un montón
de cosas chungas
de guardar
en una variable
de hecho
lo podríamos hacer
podríamos guardar
aquí en una variable
el new node
o vamos a poner
variable
y vamos a poner aquí esto
¿no?
y aquí guardar
la variable
guardar el new node
e intentar hacer esto
esto ya os digo
que es una mala práctica
¿vale?
esto sería la variable
y podríamos hacer esto
igual funciona
igual no funciona
y le doy a crear nota
¿vale?
¿ves?
ha funcionado
pero esto es una mala práctica
así no es como funciona React
¿vale?
no hagas esto
y nunca digas que yo te enseñe
a hacer esto
esto está mal
¿vale?
esta no sería la forma correcta
¿por qué?
porque en este caso
lo que está ocurriendo
es que estamos como rompiendo
el ciclo
en el que funciona React
al final tendríamos que tener
una forma mucho más declarativa
y una forma más fácil
de compartir esta información
¿y dónde podríamos guardar
esta información?
vale
aquí podríamos hacer
un montón de cosas
y podríamos utilizar algo
que no fuese un state
pero por ahora
vamos a ver cómo hacerlo
con un state
porque es la forma más típica
y además
es la forma en la que debería funcionar
en React
con los inputs
pero bueno
más adelante
verás que existen
mil millones de formas de hacerlo
vamos a evitar
tener una variable
fuera del componente
que esto lo único que hace
es traer problemas
porque si este componente
se utiliza más de un sitio
esto podría romper
como crees que funciona
y esto no es lo que queremos
todo esto
lo vamos a eliminar
¿vale?
así que este new node
lo que vamos a hacer
es guardarlo
en un estado
y este new node
que tenemos aquí
esto es lo que vamos a guardar
en el estado
set new node
¿vale?
cada vez que cambiamos
vamos a hacer
este set new node
¿vale?
lo guardamos aquí
y ahora esto
se va a guardar
en el estado
de forma que lo vamos a poder
leer aquí
en crear nota
vamos a poder hacer
un console log
y tener la nota
pero vamos a ver una cosita
¿vale?
vamos a guardar los cambios
y entonces
yo ahora voy escribiendo
¿vale?
vamos a ver
espera
voy escribiendo
le doy a crear nota
y esto parece que
todo funciona correctamente
esto podría ser una forma
en la que funcione
¿vale?
pero
hay un tema con esto
hay una cosa
que se llaman
los elementos controlados
o descontrolados
¿qué pasa en este caso?
que este input
no está siendo controlado
por React
¿vale?
veis que aquí
no tenemos ningún value
ni tenemos nada
esto lo que está haciendo
en realidad
es que este input
lo está controlando
el DOM
de forma nativa
lo cual no está mal
y de hecho muchas veces
puede tener sentido
una cosa que se podría hacer
para tenerlo
totalmente controlado
es pasarle un valor
y este valor
que lo traiga directamente
del estado
¿vale?
así que este useState
podrías tener este new node
y tenerlo aquí
en el valor
y de esta forma
sincronizar
lo que estamos mostrando aquí
con lo que tenemos
en el estado
¿vale?
ahora
el tema sobre esto
es que tienes que tener cuidado
porque si no
hay veces que si no
te aseguras
de que estás actualizando
el estado
con el estado correcto
pues al final
aquí tú puedes escribir
y a lo mejor romperlo
por ejemplo
si aquí pusiésemos esto
y guardamos los cambios
y estamos diciéndolo aquí
¿ves?
yo estoy escribiendo cualquier cosa
y ahí me pone una A
¿por qué?
porque cuando actualizo el estado
y este estado
es el que actualizamos
el input
está mal
está roto
solo pone una A
y por más que yo escriba aquí
pues me está diciendo
pues no funciona
solo te pongo una A
porque esto está mal
¿vale?
así que ten mucho cuidado
porque cuando tú eres
el dueño
de actualizar el input
pues tienes que asegurarte
que lo estás haciendo correctamente
¿vale?
vale
pues ahora que tenemos esto
pues ya sí que podríamos
crear ¿no?
esta nota y añadirla
si aquí en notas
tenemos la lista de notas
que tenemos aquí
lo único que nos faltaría
es justamente crear
un objeto que se parezca a esto
y añadirlo aquí
esto sí que vimos
cómo funcionaba el estado
pero ahora lo vamos a hacer
con este handle click
¿no?
así que aquí
lo que vamos a querer
es añadir un objeto
de esta forma
teníamos el new node
que lo único que tenemos
es el contenido
pero tenemos que
crearle una idea
tendríamos que
poner un date
o lo que sea
por ahora voy a hacer una cosa
aquí ya he puesto id
13
15
23
vamos a volver
como estaba
¿vale?
que esto lo he puesto antes
para un ejemplo
vamos a poner
1, 2, 3
voy a guardar los cambios
de esto
y ahora aquí
esto lo voy a comentar
ay
aquí es que no funciona
lo de comentar directamente
¿vale?
aquí lo vamos a comentar
y lo que voy a hacer
es crear
tenemos la new node
esta
pero node
to add
to state
¿vale?
tendríamos la idea
que la idea
podría ser
las notas
punto length
más 1
¿vale?
así tendríamos unas ideas
que van de forma incremental
¿qué más tendríamos que crear?
el contenido
pues el content
ya hemos visto
que está en new node
¿vale?
el date
pues el date
tendríamos que poner
un new date
¿vale?
no sé
este formato
que tenemos aquí
no sé si es alguno
en especial
o si le está poniendo
un new date
y ya está
new date
punto
vale
to iso string
vale
ya veo que
to iso string
to iso string
¿vale?
y luego tenemos el important
aquí podríamos poner true
siempre que sean importantes
pero la gracia
cuando vayamos añadiendo
es que veamos diferencias
entre uno y otro
entonces una cosa
que está haciendo aquí
es utilizar
más random
más random te da un número
entre 0 y 1
así que podríamos intentar
hacer que nos vaya saliendo
la mitad importante
y la otra mitad no importante
así que si más random
el número que nos da
está por debajo de 0.5
la mitad de los que creemos
más o menos
será importante
si la otra mitad
no sean importantes
entonces
esta sería la nota
que queremos añadir
¿vale?
no to add to state
esta sería la nota
que queremos añadir
vamos a
ahora
con el console.log
vamos a decir
new def
crear nota
y ya tendríamos aquí la nota
pero obviamente
todavía no la estamos creando
no la estamos añadiendo aquí
tendríamos que actualizar
el estado
de hecho ya me está diciendo
oye que este set note
no lo estás utilizando
vale
pues vamos a utilizarlo
set notes
súper importante
¿vale?
súper importante esto
porque el tema
es que aquí
tenemos que tener cuidado
ya dijimos en la primera clase
que los arrays
se pueden mutar
¿vale?
puedes modificar
su valor
lo cual no puedes hacerlo
con los strings
con un boleano
con un número
no puedes modificar su valor
siempre tienes que crear uno nuevo
pero los arrays
los pueden mutar
ya dijimos que en React
no tenemos que mutar
ni objetos
ni arrays
¿vale?
de esta forma
siempre tenemos que crear
un array nuevo
un array nuevo
cada vez que queramos
actualizar el estado
lo que vamos a querer
es crear un array nuevo
y como vimos en la primera clase
una forma de añadir
un elemento en array
podría ser por ejemplo
tener nodes
y lo que vamos a hacer
es concatenar
el nuevo elemento
que queremos añadir
¿vale?
esta sería una forma
y esto debería funcionar
debería funcionar
vamos a ver
si ahora aquí
refrescar
ponemos aquí
midu def
y le damos a crear nota
pues ya tenemos aquí
¿veis?
que se ha añadido
y aquí podemos poner
otra nota más
y crear nota
¿vale?
y ya estamos añadiendo
las notas
ahora
podríamos ir un poco más allá
veis aquí
otra nota más
que se queda aquí
aunque yo le voy dando
pues se va creando
la gracia
de tener
el control
sobre el valor del input
es que lo podríamos limpiar
ahora podemos decir
vale pues aquí
además de actualizarme
el array de list
o sea la lista de notas
ahora
el string
que tienes aquí dentro
pues me lo vas a refrescar
me lo pones
como uno vacío
y de esta forma
cada vez
que yo voy poniendo aquí
midu def
y le voy a dar
crear nota
¿veis?
me lo ha limpiado
y de esta forma
pues como tú tienes
el control del input
te permite hacer
este tipo de cositas
pero esto
no está bien del todo
¿vale?
y ahora os explico por qué
voy a leeros
un momentito
voy a beber agüita
y os leo
¿vale?
y ahora os explico
por qué esto no está bien del todo
nos estamos acercando
pero no está bien del todo
vale
no os preocupéis
los que estén ahí
os tengáis que ir
si a ver
esto se queda grabado
en el canal de YouTube
es midu.tuve
vale
hay gente que me dice
sería posible utilizar esta
sí
una forma de concatenar
en lugar de utilizar esta
sería utilizar justamente
también el spread
¿no?
sería decir
quiero todos los elementos
que tenemos en notas
y además me añades el note
to add to state
esta sería otra forma
totalmente diferente
a la que hemos visto antes
que al final
el resultado es exactamente
el mismo
¿vale?
mi recomendación
sobre todo cuando estás empezando
es utilizar el concat
porque se lee mejor
pero luego verás
que esta es una forma
mucho más cómoda
porque te permite además
si tienes que concatenar
más de uno
imagínate
que queremos añadir dos notas
por X motivo
podríamos hacer esto
o podríamos fusionar
all notes
también aquí
se pueden hacer cosas
mucho más potentes
y de una forma
mucho más sencilla
una vez que lo dominas
pero si estás empezando
yo creo que la forma
más legible de hacerlo
y sobre todo
si estás con más gente
sería hacer esto
¿vale?
¿por qué?
porque dices
anotas
le añades esto
o sea
es mucho más fácil de leer
pero yo
si me preguntas a mí
que es el que utilizo yo
en mi día a día
te diría que justamente
utilizo este
este es el que utilizo
en mi día a día
¿por qué?
porque es más extensible
una vez que lo ves
y lo dominas
se entiende a la primera
pero para empezar
pues no sería mi recomendación
de hace esto y ya está
no
mi recomendación
para empezar
sería el del concat
¿vale?
pero este sería
sería la forma
para hacerlo
¿vale?
ok
¿qué más?
¿qué más?
si quiero setear
un array diferente
cada vez en un click
¿cómo lo harías?
si quiero setear
un array diferente
bueno
al final
tú aquí puedes setear
lo que quieras
o sea
aquí hemos utilizado
nodes
como que
podríamos utilizar
el array que quisiéramos
al final
cuando estás actualizando
el estado
podríais hacer
lo que queráis
¿vale?
aquí al final
lo importante
es que le devolvamos
una nueva lista
¿vale?
esto es un array nuevo
esto no es
el que teníamos antes
siempre estamos creando
un array nuevo
esto crea un array nuevo
el concat
crea un array nuevo
lo importante
es que no hagamos
esto
por ejemplo
¿vale?
esto estaría mal
porque esto no crea
un array nuevo
sino que esto
lo que hace
es mutar
el original
así que concat
¿vale?
vale
¿qué más?
¿qué más?
pues más o menos
creo que
está todo contestado
¿sí?
¿puede ser?
sí que vamos a tocar hooks
de hecho ya estamos tocando hooks
pero ahora veremos
el use effect
en un momentito
vale
os decía que esto no estaba
del todo bien
no estaba del todo bien
porque si yo escribo aquí
y le doy a enter
no pasa nada
y esto es un error
tan común
tan común
que esto es una muy mala práctica
¿vale?
es una muy mala práctica
lo que hay que hacer
cuando tengamos un input
y queremos hacer este tipo de cosas
por más que estemos empezando
es utilizar un formulario
¿vale?
así que vamos a añadir aquí
un form
pero entonces
¿qué ocurre aquí?
que no
y esto
es que yo alucino
unas pocas veces
que esto se explica
en cursos y tal
a ver
en el formulario
ya no vamos a hacer
este onclick
¿vale?
no tenéis que hacer
el evento del onclick
tenéis que hacer
el onsubmit
y ahora os explicaré una cosa
de por qué esto
es súper importante
así que
cuando el formulario
en el evento
onsubmit
porque el formulario
también tiene
un montón de eventos
que podéis mirar
en la documentación
y tal
pues en lugar
de hacer un handleclick
que no tiene sentido
será un handlesubmit
el handlesubmit
hará exactamente
lo mismo
que estamos haciendo antes
pero aquí
ahora veremos
un problema
que nos vamos a encontrar
¿vale?
vamos a guardar
los cambios
y si yo aquí
añado la nota
y le voy a dar
crear nota
me ha refrescado
la página
¿vale?
¿por qué?
porque
por defecto
está intentando
hacer un submit
con un post
como vimos
en la primera clase
al servidor
¿vale?
esto no está bien
porque no queremos
que el formulario
funcione así
esto son
cosas históricas
que tiene el lenguaje
y que no podemos cambiar
pero sí podemos evitar
por ejemplo
lo que le podemos decir
es que
evite
el comportamiento
por defecto
de este evento
hacemos un event
prevent default
guardamos los cambios
y ahora sí
si aquí añadimos
lo que sea
y le vamos a crear nota
ahora funciona bien
ahora
una cosa interesante
si ahora escribo
y le doy al enter
también funciona bien
pero alguien dirá
bueno pero ¿cómo puede ser
que este botón
cuando haces esto
en submit
¿por qué funciona?
esto funciona
solo este botón
lo que está pasando aquí
es que el último botón
de un formulario
por defecto
funciona como un submit
¿vale?
esto es súper importante
por un tema semántico
puedes cambiar tú
este comportamiento
creo que podrías
cambiar aquí el tipo
decirle que esto es un botón
no sé si esto
sí
¿veis?
le he cambiado el tipo
he dicho no
esto es un botón
entonces ahora
cuando le doy click
ves ahora no pasa nada
por defecto
el último botón
de un formulario
funciona como submit
y esto la verdad
es que me sorprende
que muchas veces
no se cuenta
está funcionando
de esta manera
¿vale?
este botón
por defecto
el último formulario
el último botón
de un formulario
funciona como submit
y de esta forma
ya no tienes que hacer
el on click
que esto también lo veo
un montón
solo tienes que hacer
un submit
y obviamente esto
es mucho más accesible
y semánticamente
es correcto
¿vale?
estamos utilizando bien
las etiquetas
y todo esto
así que
ya sabemos esto
cómo funciona
los formularios
veo que más o menos
ah vale
veo que está haciendo
ah esto es interesante
¿vale?
vamos a hacer esto
por ejemplo
ahora que tenemos
algunos que son importantes
y otros que no son importantes
voy a poner aquí
el important
vale
veis que tenemos
el 1
es importante
el 2
no es importante
el 3
si es importante
de la misma forma
que hemos puesto
lo de mapear
arrays
también lo podemos filtrar
o sea
podríamos poner
show all
set show all
y aquí vamos a decir
por defecto
true
lo que podemos hacer
es añadir
por ejemplo
aquí
un botón
que sea
show all
que al hacer
on click
handle show all
vamos a hacer aquí
un handle show all
y esto
lo que podemos hacer
es cambiar
un filtro
¿no?
que sería el set show all
de forma que le vamos a cambiar
el valor
vamos a hacer como un toggle
cuando estaba
mostrarlos todos
pues lo muestras todos
y si no
así
ahora mismo
esto no tiene mucho sentido
pero
lo que vamos a hacer
es que
según el valor
de este show all
vamos a cambiarle
con un renderizado condicional
como hemos visto ya
este texto
¿no?
cuando decimos
si tiene el valor show all
vale
pues entonces
decimos
si tenemos show all
pues
vamos a
show all
important
y si no
pues show all
vale
ahora si le voy dando
¿ves?
show all important
show all important
va cambiando ¿no?
estamos haciendo un token
y esto
para que tenga todavía más sentido
lo podríamos utilizar aquí
en notes
de forma que podríamos
aparte de hacer este mapeado
podríamos filtrarlo antes
podríamos decirle
estas notas
me las filtras
y la nota
en el caso
de que
show all
mira vamos a hacerlo más largo
¿vale?
si tenemos el show all
a true
pues lo que vamos a hacer
directamente
es devolver la nota
¿vale?
de esta forma
esto debería funcionar
exactamente igual
no estamos haciendo
ningún tipo de
de cambio
ahora
si no
tenemos
si el show all
lo tenemos a false
significa que solo tenemos
que enseñar los importantes
así que lo que vamos a hacer
es que
la nota
punto important
sea igual a true
¿vale?
vamos a guardar
ahora los cambios
vale
ahora he puesto
show all
si es true
devuelve la nota
si es diferente a false
ah bueno
espérate
que me lo está haciendo
al revés
show all
true
filtrame
si tenemos esta nota
filtrame
pero show all
ahora lo tengo a true
¿no?
show all
la primera
ah es que
claro
se guarda el
vale vale
es que se guarda el estado
entre
cuando estás modificando aquí
el estado
claro digo
pero si todavía no le he dado
vale
entonces
¿veis que ahora si le doy
aquí me está cambiando?
porque estoy filtrando aquí
lo que estamos haciendo
es que si el estado
show all
es true
como los quiero todos
pues devuelve la nota
y entonces pasa el map
y ya lo estoy transformando aquí
ya está
pero ¿qué pasa?
cuando le doy a show
only important
me ha cambiado el show all
y me lo ha puesto a false
y ahora como le estoy diciendo
no me los muestres todos
solo muéstramelo
los importantes
solo aquellos que le importan
este a true
me los va a mostrar
¿vale?
de esto podemos ver aquí
que el important true
es el 1
y el 3
que es el get and post
¿veis?
pero este de aquí en medio
no aparece
y aquí vemos
el ejemplo
de lo que hablábamos antes
justamente
¿vale?
justamente antes hablábamos
no utilices el index
pues mira
aquí tenemos un ejemplo
buenísimo
si aquí utilizamos el index
¿qué pasa?
que como vamos a filtrar
y va a desaparecer
el elemento ahí en medio
ahí lo tienes
¿vale?
mira
ahí
esto está mal
que he puesto return node
pero esto debería ser
devolver siempre true
no tiene mucho sentido
al final como node
siempre era true
pues esto funcionaba
el filtro debe devolver un boleano
¿vale?
tiene que ser
esto tiene sentido
porque devolverá true o false
y aquí debería ser
si quiero mostrarlo todos
pues siempre devolverme el true
esto
he puesto el node
porque se me ha ido
pero el filtro debería ser
siempre devolver un boleano
¿vale?
porque true es
vale este sí que se tiene que mostrar
y false sería que no
así que show all
siempre esto sería true
y como el node
como en realidad es un valor
truthy
por eso funcionaba
vale
vamos a ver esto del index
un momento
como aquí ahora he puesto el index
claro
si yo ahora le doy aquí
bueno
en este caso está funcionando bien
pero esto puede ser problemático
porque ahora mismo el índice
a ver
voy a volver a guardar
a ver si
esto
vamos a ver si
bueno
claro
hay veces que puede
el tema es que esto puede ser problemático
porque al final
este índice que estamos utilizando antes
pues ya no concuerda
con el que estaba teniendo antes
¿vale?
porque desaparece un elemento
y su índice 1
ahora es 1
pero para otro elemento
¿vale?
así que nada de utilizar el índice
siempre la ID
un identificador
que sea
único
¿vale?
pensaba que saldría un warning
la verdad es que eso me ha dejado sorprendido
pensaba que habría un warning y tal
pero no
no ha salido ningún warning
pues ya lo tendríamos
¿vale?
en este caso
de nuevo
esto que estamos utilizando
este concatenar
y tal
alguien me dice
¿puedes utilizar aquí una función?
sí
puedes utilizar una función
ya lo vimos en clases anteriores
podríamos utilizar esto
¿vale?
prep nodes.concat
y aquí
node to add
en este caso
como esto no es asíncrono
no debería haber ningún problema
utilizar este o el anterior
pero bueno
que como sabéis
a la actualización de estado
puedes pasarle
una función
que recibe como parámetro
el estado anterior
y le puedes pasar el nuevo estado
¿vale?
el que prefiráis
en este caso
cualquiera de los dos
debería funcionar igual
¿vale?
pues con esto
ya he tenido la parte
de los formularios
así que vamos
con el tema
de recuperar
información del servidor
que me parece
súper interesante
y si os lo pasáis pipa
este filtro
se puede hacer
de otra forma
¿vale?
esto lo he dejado así
para que sea más legible
podéis dejar vuestra opinión
y vuestra creatividad suelta
y reescribirlo
como queráis
¿vale?
yo lo he dejado así
solo para que lo leáis bien
para que lo entendáis
y no os liéis
porque si yo lo pongo
de primeras así
de hacerlo súper chungo
me diréis
pero que lioso
¿por qué lo haces tan difícil?
vale
aquí habla de utilizar
el JSON server
¿no?
¿no?
¿no?
¿no?
¿no?
¿no?