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!