How to specify the shape of an object with PropTypes

With PropTypes we can also check the inner structure of objects

Yesterday we learned how the PropTypes library makes it easy for us to check the types of objects we pass to React components through the props.
For example, this code makes sure the object pokemons is an array of objects:

Pokemons.propTypes = {
  pokemons: PropTypes.arrayOf(PropTypes.object)
}

If we accidentally pass pokemons as an array of other types, like an array of strings for example, we get a warning in the Javascript console and we can fix the error.

PropTypes lets us go further, though. It lets us describe in detail the inner structure of an object, what is called the shape of an object. This makes our data validations more thorough and accurate.
The way we do this deep validation is by using the shape() method of PropTypes.
shape() takes an object and validates the types inside the object.
Here's an example:

Pokemon.propTypes = {
  pokemon: PropTypes.shape({
    name: PropTypes.string,
    id: PropTypes.number,
    base_stamina: PropTypes.number,
    base_defense: PropTypes.number
  })
}

Here we validate that the pokemon object has a name of type string, and id, base_stamina and base_defense of type number.
If the object we pass into our props has one of these properties wrong, we will get a warning, even though Javascript would be happy to accept a string in place of a number type.

Required properties

Sometimes we need to pass props objects that have some required properties and some optional ones.
PropTypes helps us in this case as well by specifying which property is required and raising a warning if it's not present.
To perform this check we simply add isRequired at the end of the property type, like so:

Pokemon.propTypes = {
  pokemon: PropTypes.shape({
    name: PropTypes.string,
    id: PropTypes.number.isRequired  // required property
  })
}

We may not feel the need to use PropTypes every single time, but when our project grows and becomes complex PropTypes sure helps avoid bugs that could become difficult to track down.

If you like this article and want to receive more in your inbox, just click the button below to sign up for a free subscription.