React propTypes: objectOf vs shape?

reactjs react-proptypes
DMac the Destroyer picture DMac the Destroyer · Aug 18, 2017 · Viewed 44.4k times · Source

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

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)

vs

// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

When should I use objectOf and when should I use shape?

Answer

djfdev picture djfdev · Aug 18, 2017

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

Related questions

React proptype array with shape

Is there a built-in way to use proptypes to ensure that an array of objects being passed to a component is actually an array of objects of a specific shape? Maybe something like this? annotationRanges: PropTypes.array(PropTypes.shape({ start: …

Read More
ReactJs: What should the PropTypes be for this.props.children?

Given a simple component that renders its children: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Question: What should the propType of the children …

Read More
React PropTypes : Allow different types of PropTypes for one prop

I have a component that receives a prop for its size. The prop can be either a string or a number ex: "LARGE" or 17. Can I let React.PropTypes know that this can be either one or the other in …

Read More