<aside> 📌 Dependencia separada de react que controla el tipo de dato de las props. Los errores solo se ven en modo de desarrollo
</aside>
npm i prop-types
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`)
}
}
}