<aside> 📌 Dependencia separada de react que controla el tipo de dato de las props. Los errores solo se ven en modo de desarrollo

</aside>

Instalacion

npm i prop-types

Uso

Para usar las prop types es necesario importar la dependencia sin nombrarla

import PropTypes from 'prop-types'

luego al componente se le añade un metodo que es igual a un objeto con los tipos de datos de las props. Este objeto contiene el nombre de la prop y su tipo de dato. Se puede forzar el requerimiento de ciertas props agreagando al final isRequired.

Tambien se puede personalizar el tipo de dato igulando el nombre de la prop a una funcion, la funcion recibe 3 parametros, las props, propName y el componentName

Componente PhotoCard

export const PhotoCard = ({ id, liked, likes = 0, src = DEFAULT_IMAGE, location }) => {
	...

PropTypes del componente

PhotoCard.propTypes = {
  id: PropTypes.string.isRequired,
  liked: PropTypes.bool.isRequired,
  src: PropTypes.string.isRequired,
	location: PropTypes.string,
  likes: function (props, propName, componentName) {
    const propValue = props[propName]

    if (propValue === undefined) {
      return new Error(`${propName} Value must be define`)
    }

    if (propValue < 0) {
      return new Error(`${propName} Value must be greater than 0`)
    }
  }
}