vamos a ver otro tema que son las prop types
porque imagínate este
toggle, este toggle, este componente
tan genial que hemos hecho, ¿no? que resulta
que aquí pues se me olvida
poner este button label, ¿no? imagínate
se me ha olvidado, guardo los cambios, me voy
aquí y fíjate como sale mi
botón y ahora no sé de dónde sale
esto y cómo funciona y capa chao
y además no me sale ningún warning ni nada
es un poco rollo, ¿vale? pues bueno
existe una librería que es oficial
de React y que antes estaba en el
propio core de la librería pero
desde la versión 15
o así, lo sacaron y ahora se tiene que
instalar de forma aparte, aunque sigue estando
bastante ligado con la propia librería de React
es una cosa que ahora está separada, se llaman
prop types y lo que te permite es de alguna
forma documentar qué props son
las que necesita un componente para funcionar
no sólo que sean requeridas o no, sino
también el tipo de datos que espera
esa prop y son súper customizables
puedes crear props propias
con tipos propios, por ejemplo, imagínate
que sólo podemos pasarle aquí
es muy típico porque es un string pero imagínate que
le podríamos pasar type y sólo puede ser
type primary y secondary
pues podrías hacer una prop type especial
para justamente chequear si le has pasado uno de los datos correctos
no sólo que sea un string sino ver si es un primary o secondary
eso ya te lo voy a dejar para que
te lo practiques o lo mires en la documentación
que lo explica bastante bien, pero vamos a ver un poco
cómo utilizarlo porque creo que es una herramienta que a veces
puede ser muy interesante y te puede salvar de más de un problema
especialmente cuando estás trabajando
con más gente en un equipo
no sólo cuando trabajas solo. La instalaríamos así
en pd install prop types
ya tendríamos, voy a volver a levantar
el servidor, vale
mientras esto ahora ya está aquí pensando
entonces como el problema me lo está dando este
togable que le he quitado este button label
y no me está diciendo nada, esto quiere decir
que si quiero que esa prop sea requerida
necesito que me avise de alguna forma
vamos a ir al componente togable
vamos a togable aquí
y voy a hacer un import de prop types
from prop types
ahora, ¿cómo utilizamos estas prop types?
lo que tenemos que hacer en este caso
es decirle que este componente togable
togable, togable
tiene una propiedad que se llama prop types
vale, fíjate que ya me lo está diciendo por aquí
prop types
y a esto le pasamos un objeto
el objeto lo que va a identificar
es cada una de las props que necesita
el componente togable para funcionar
ten en cuenta una cosa súper importante
esto es solo informativo
o sea, esto ya has visto que funciona sin
y también funciona aunque te equivoques
o sea, yo aquí puedo poner lo que quiera
yo puedo poner aquí
que necesita pepito
y que esto es un string
o puedo poner aquí
whatever
y poner true
puedo hacer lo que quiera
que mi componente va a seguir funcionando
puede ser que te sea algún warning
puede ser un montón de cosas
pero ten en cuenta que esto es solo informativo
no confíes en que realmente esto va a evitar
que utilices el componente de una forma
o que necesitas que funcione el componente
con esto
no tiene nada que ver
vale, es solo informativo
que te va a ayudar en tiempo de desarrollo
de hecho, en modo producción
ni siquiera te salen los warnings
de que estás utilizando mal las props
para que lo tengas en cuenta
ahora que sabes esto
el warning button label
el button label
vamos a decir que es una prop type
que es del tipo string
y que es requerida
así es como se diría
primero se hace prop types
prop types
accedes a todos los tipos
que tienes string, symbol
tienes array
puedes decirle que es un array of
para decirle que es un array de números
de string, de no sé qué
puedes decirle que es un objeto
de una forma en concreto
que son elementos
que son componentes de React
un montón de cosas
en este caso decimos que es un string
y además cada uno de los tipos
le puedes decir
si es requerido o no es requerido
en este caso
decimos que es required
de forma que ahora
si guardo los cambios
y todavía no he añadido la prop
ahora cuando trabaje
¿veis?
tengo aquí warning
fail prop type
la prop button label
está marcada como requerida
pero este valor es undefined
además fíjate
aquí hay una cosa
que me resulta muy interesante
¿no?
que me dice
es requerida en forward ref
pero esto no me está dando
mucha información
me está diciendo que es forward ref
esto es porque
como estamos utilizando
este componente forward ref
aquí
al final lo que hace
es cambiarle el nombre
¿no?
el nombre no queda muy legible
no sé
cuando
ahora que he visto esto
no sé si hay otra forma
de que le podamos forzar
que ponga mejor el nombre
pero tiene otra propiedad
los componentes
que se llama display name
que aquí le puedes poner
el nombre que tú quieras
al componente
normalmente se fía
del nombre que tienes aquí
pero en casos que utilices
este tipo de funcionalidades
como el forward ref
o el react memo
cosas así
que el react memo
no lo hemos visto
pero también es
una funcionalidad
no parecía forward ref
pero sí en el sentido
de que tienes que envolver
tu componente con ello
pues le puedes poner
el nombre que tú quieras
el que tú quieras
entonces voy a ver
si con esto
¿vale?
¿ves?
le hemos puesto ahora
el que tú quieras
de esta forma
en lugar de dejar
el forward ref
pues es una buena idea
ponerle el display name
y forzar que sea el nombre
que estás esperando que sea
y ahora de esta forma
este warning
se lee bastante mejor
que no de la otra forma
que ves un forward ref
y no sabes de dónde viene
así de esta forma
dices vale
es el togable
esto también te puede ayudar
incluso aquí
en el árbol de componentes
porque en el árbol de componentes
si dejas el forward ref
también te aparecería
ese el nombre del forward ref
así que ahora
cambiando el display name
pues ya tenemos aquí
display name
mucho mejor
ahora que tenemos esto
de las proptypes
a ver
podríamos ir más allá
podríamos
lo hemos utilizado aquí
en el togable
muy interesante
pues tenemos el login form
pues un poco
para que veas
como más o menos
como sería
proptypes
login form
lo mismo
en este caso
no tienes que poner
display name
¿por qué?
porque es el componente
directamente
pues va a utilizar
por defecto
el nombre del componente
solo es en el caso
uno de funciones
que sean anónimas
esto no lo hagan nunca
¿vale?
nunca utilices un componente
de react sin nombre
siempre ponle un nombre
esto funcionar funciona
pero no está bien
porque justamente
es eso
el nombre del componente
el nombre de la función
lo utiliza como el nombre
del componente
así que
déjale siempre un nombre
y aquí pues nada
lo mismo
login.proptypes
en minúscula
fíjate que aquí
este es en minúscula
y aquí pues nada
iríamos viendo
handle submit
pues handle submit
¿qué es?
pues proptypes.funk
¿vale?
de función
¿he requerido?
hombre pues en este caso
yo creo que sí
pues nada
requerido
¿qué más?
props
username
pues nada
el username
sabemos que es
proptypes.string
¿he requerido?
bueno
esto pues puede ser
andefane al principio
luego a lo mejor no
así que
podremos dejarlo así
y esto pues iría
así con todas las proptypes
y es una forma de documentar
de nuevo ten en cuenta
que esto
si por lo que sea
no lo utilizas correctamente
y luego esperas
que en producción
te aparezca este tipo de error
no te sale
¿vale?
en producción
no te sale de ninguna forma
no te fíes
porque en producción
no lo vas a poder ver
no lo vas a ver
y no te va a funcionar
cosas interesantes
de que puedas tener
con proptypes
una forma también
que pueda funcionar
no tiene que ver
con las proptypes
pero está
relacionada con las props
es el hecho
de que puedan tener valores
por defecto
antiguamente
y a lo mejor es una cosa
que todavía ves
en este caso
el button label
vemos que
si se me queda
si me quedo sin
aparece ahí vacío
es un poco raro
igual si tengo muy claro
que puede tener un valor
por defecto
puede ser buena idea
darle un valor por defecto
antiguamente
se hacía de esta forma
hacías togable
punto
default props
y luego le ponías
un objeto
y le decías
pues el button label
el valor por defecto
que tiene que tener
es
pues
muéstrame esto
amigo
¿vale?
y si guardo los cambios
ahora
como no le estaba pasando nada
¿ves?
muéstrame esto amigo
vale
perfecto
esto
importante
significa que ya no es requerida
así que ten en cuenta esto
porque
si no
fíjate que aunque
le dejas el ir required
es verdad que desaparece
porque ya entiende
que si le estás proporcionando
el valor de alguna forma
entonces ya
está pasando correctamente
pero bueno
ya no debería ser requerido
como tal
igualmente
en cualquier caso
esta no es la forma correcta
de utilizar valores
por defecto
de las props
en componentes de react
que son funciones
¿ok?
por diferentes motivos
uno
por innecesario
dos
porque está deprecado
tres
porque lo van a quitar
así que
cuanto antes te
te acostumbres
a no hacer esto
en componentes de react
de funciones
mejor
¿por qué digo de funciones?
porque hay componentes
que son
clases
en react
que también son
de una forma antigua
como se hacían
los componentes
que sí que es necesario
porque en una clase
tú no le puedes poner
un valor por defecto
a una prop
que no sea así
entonces si son clases
utilizas este
si no son clases
la forma correcta
de hacer esto
no es así
sino que sería
utilizando justamente
los valores por defecto
que puedes tener aquí
si tienes aquí
el botón label
pues aquí le pondríamos
muéstrame esto
desde
la fun
desde
default values
¿vale?
lo haríamos aquí
y esta sí que sería
la forma
¿ves?
funcionaría también
correctamente
en este caso
sí que las prop types
se quejarían
porque no está pasando
por el sistema interno
este de react
¿ves?
aquí se cree
que no se lo ha pasado
y es que yo considero
que este
ir required
no tiene sentido
porque si estás pasando
un valor por defecto
ir required
es muy raro
¿vale?
no tiene sentido
una de las dos
está mal
así que yo le quitaría
el ir required
y esta sería
la forma correcta
de ponerle valores
por defecto
a los componentes
funcionales
de hecho esto
también lo puedes hacer
a veces
se puede hacer
en temas
como por ejemplo
handle submit
pues en ocasiones
se hace esto
¿vale?
y ahora te explico
qué es esto
no op
significa no operación
y esto lo puedes poner así
lo puedes poner así
y esto se puede utilizar
a veces como valor
por defecto
de algunos callbacks
justamente para evitar
tener que revisar
si ese callback existe
si no existe
y al menos tienes un valor
por defecto
no lo haces requerido
porque no es requerido
pero no tienes que estar aquí
if handle submit
entonces
hago el handle submit
y le paso esto
esto puede ser interesante
a veces con los callbacks
¿vale?
solo para que lo sepas
pero no utilicen más
las default props
porque ya os digo
que en componentes funcionales
de hecho
la idea es que
esto es un tema
que hablaron
el propio equipo de React
que lo van a quitar
entonces con esto
ya hemos visto
mostrar el formulario
inicio de sesión
solo cuando se le dé un botón
hemos creado
y entendido
props children
hemos creado un componente
que es reutilizable
totalmente
que con una funcionalidad
que es el de togable
hemos visto
donde debería ir
del estado
de los formularios
también
Gracias.