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.
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!
