React propTypes: objectOf vs shape? React propTypes: objectOf vs shape? reactjs reactjs

React propTypes: objectOf vs shape?


PropTypes.objectOf is used when describing an object whose properties are all the same type.

    const objectOfProp = {        latitude: 37.331706,        longitude: -122.030783    }    // PropTypes.objectOf(PropTypes.number)

PropTypes.shape is used when describing an object whose keys are known ahead of time, and may represent different types.

    const shapeProp = {        name: 'Jane',        age: 25    }    // PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })


Just wanted to provide an example given the following object:

{    petStore: {        animals: {           '23': { name: 'Snuffles', type: 'dog', age 13 }           '29': { name: 'Mittens', type: 'cat', age: 7 }        }    }}

ObjectOf and Shape

Used when an object could have different property names, but a consistent set of properties for each one:

const animalItemShape = {    name: PropTypes.string,    type: PropTypes.string,    age: PropTypes.number}const petStoreShape = {    animals: PropTypes.objectOf(PropTypes.shape(animalItemShape))}

As you can see, animals is an object composed of multiple properties that each conform to the animalItemShape type.

Hope it helps!