React propTypes: objectOf vs shape?

Question

What\'s the difference between PropTypes.objectOf and PropTypes.shape? In the docs:

// An object with property values of a certain         


        

Answer 1

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 })

Answer 2

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!