Warning failed prop type en React

Autor: | Última modificación: 4 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Las librerías de programación son una herramienta que nos permite ejecutar diversas acciones. La librería proptypes nos permite definir el tipo de valor necesario de una prop que le pasamos a un componente. En este post, te enseñaremos qué es la advertencia warning failed prop type en React, una comprobación que nos dice cuándo hemos cometido un error de tipo.

¿Qué es el warning failed prop type en React?

El warning failed prop type en React es una de las advertencias que saca esta librería JavaScript cuando el tipo de prop que hemos definido no es igual al tipo de prop que se le ha pasado a un componente.

El tipo de prop se puede determinar con la librería proptypes. Te invitamos a conocer más sobre esta librería en nuestro post propTypes en React.

Para entender cómo funciona el warning failed prop type en React, usemos un ejemplo. Supongamos que tenemos el siguiente componente RequireAuth, al que le hemos pasado las props isLogged y children:

const RequireAuth = ({ isLogged, children }) => {

}

Ahora, con la librería propTypes en React, podemos definir qué tipo de dato debe tener cada prop recibida. A continuación, puedes ver que hemos definido que la prop isLogged debe ser de tipo booleano, mientras que la prop children es de tipo node.

El tipo node es una categoría que se refiere a cualquier cosa que sea interpretada. Es decir, un número, una cadena, un elemento de React o un array.

RequireAuth.propTypes = {

isLogged: T.bool,

children: T.node,

};

Para ver cómo funciona el warning failed prop type en React debemos forzar el uso de este componente. Esto será diferente para tu proyecto que para el nuestro, por lo que te recomendamos ejecutar la acción necesaria en tu test y tener abierto el inspector de tu navegador.

Ahora, supongamos que tenemos un contexto en el que llamamos al componente RequireAuth y le pasamos los valores de las distintas props:

const ConnectedRequireAuth = props => (

<AuthContextConsumer>

{({ isLogged }) => <RequireAuth isLogged= {isLogged} {…props} />}

</AuthContextConsumer>

Es en este tipo de componentes padre que podríamos pasar los valores de props. Entonces, pensemos que a la prop isLogged, que debería ser un valor booleano, pasamos un valor numérico:

const ConnectedRequireAuth = props => (

<AuthContextConsumer>

{({ isLogged }) => <RequireAuth isLogged= {5} {…props} />}

</AuthContextConsumer>

Al forzar la ejecución de este componente, veremos el warning failed prop type en nuestro inspector. ¿Por qué? Pues porque estamos utilizando un tipo de valor diferente al definido previamente. Lo bueno de este tipo de advertencia es que nos dice exactamente qué prop tiene el tipo inválido, qué tipo hemos definido y cuál debería ser. Entonces, en nuestro caso estamos viendo el siguiente mensaje:

Warning: failed prop type: prop ‘isLogged’ of type ‘number’ supplied to ‘RequireAuth’, expected ‘boolean’.

Como puedes ver, el mensaje indica el nombre de la prop, al igual que el nombre del componente. Además, nos dice que el componente ha recibido un tipo numérico cuando se esperaba un tipo booleano. Esto es muy útil cuando estamos trabajando con decenas de componentes simultáneamente, pues podemos ver el fallo en el render de manera clara.

Ten presente que el chequeo solo sucede cuando ejecutas el componente. Es decir, hasta el momento de ejecución del código no sabrás si se está cumpliendo o no. Este tipo de comprobación se considera dinámico y es mejor tenerlo a no tener nada. Sin embargo, si quieres crear un tipo de chequeo estático durante la escritura del código, te aconsejamos revisar TypeScript.

¿Quieres seguir aprendiendo?

Ahora que sabes qué es y cómo funciona el warning failed prop type en React, seguro que quieres seguir aprendiendo sobre los elementos de esta y otras herramientas de programación para la web. Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva con el que dominarás lenguajes como JavaScript, HTML y CSS en pocos meses. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!