React proptype array with shape
You can use React.PropTypes.shape()
as an argument to React.PropTypes.arrayOf()
:
// an array of a particular shape.ReactComponent.propTypes = { arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({ color: React.PropTypes.string.isRequired, fontSize: React.PropTypes.number.isRequired, })).isRequired,}
See the Prop Validation section of the documentation.
UPDATE
As of react v15.5
, using React.PropTypes
is deprecated and the standalone package prop-types
should be used instead :
// an array of a particular shape.import PropTypes from 'prop-types'; // ES6 var PropTypes = require('prop-types'); // ES5 with npmReactComponent.propTypes = { arrayWithShape: PropTypes.arrayOf(PropTypes.shape({ color: PropTypes.string.isRequired, fontSize: PropTypes.number.isRequired, })).isRequired,}
Yes, you need to use PropTypes.arrayOf
instead of PropTypes.array
in the code, you can do something like this:
import PropTypes from 'prop-types';MyComponent.propTypes = { annotationRanges: PropTypes.arrayOf( PropTypes.shape({ start: PropTypes.string.isRequired, end: PropTypes.number.isRequired }).isRequired ).isRequired}
Also for more details about proptypes, visit Typechecking With PropTypes here
And there it is... right under my nose:
From the react docs themselves: https://facebook.github.io/react/docs/reusable-components.html
// An array of a certain type optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),