React proptype array with shape React proptype array with shape reactjs reactjs

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