Validar las Props

PropTypes

Imaginemos que ahora dentro del componente Item, al precio que se recibe, antes de mostrarlo se lo multiplica por 2. ¿Qué pasaría si en vez de pasarle el precio como un numero en la prop price, se le pasa un string invalido?

const Item = (props) => (
  <div className="item">{props.name} USD ${props.price * 2}</div>
);

<div>
    <h1>Tech Training de React!</h1>
    <Item name="Laptop Asus 8GB Ram i7" price={500}/>
    <Item name="Laptop Dell 4GB Ram i5" price={250}/>
    <Item name="Laptop Dell 8GB Ram i7" price="texto"/>
</div>

Esto causara que en pantalla se vea un NAN.. pero hay formas de hacer esto mas correcto, y que se muestre un error en consola cuando nuestros componentes reciben un tipo de dato equivocado, utilizando Prop Types.

Para esto primero debemos instalar como una dependencia la librería prop-types

npm install prop-types --save

Y luego agregar la declaración de los tipos de props que nuestro componente puede recibir:

import PropTypes from 'prop-types';

const Item = (props) => (
  <div className="item">{props.name} USD ${props.price * 2}</div>
);

Item.propTypes = {
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired
};

Esto causará un warning en la consola del navegador, indicando el error:

Hay un montón de tipos y validadores que podemos utilizar para esto, pueden leer más sobre estos acá.

Por otro lado, también se pueden definir defaultProps para props que no son requeridas:

import PropTypes from 'prop-types';
​
const HelloWorld = (props) => <div className={props.className}>{props.content}</div>
​
HelloWorld.propTypes = {
  content: PropTypes.string.isRequired,
  className: PropTypes.string
};
​
HelloWorld.defaultProps = {
  className: 'hello-world'
};