React.PropTypes array with specific length

reactjs react-proptypes
Noitidart picture Noitidart · Mar 7, 2017 · Viewed 12.4k times · Source

Is it possible to use React.PropTypes to enforce length's on an array?

Here is a very simple case:

const TWO_NUMBERS = PropTypes.array; // i need this to be an array of two numbers

I know in javascript arrays are just objects so I tried this:

const TWO_NUMBERS = PropTypes.shape({
    0: PropTypes.number.isRequired,
    1: PropTypes.number.isRequired,
});

However this keeps telling warning me expected an object but got an array.

Answer

finalfreq picture finalfreq · Mar 8, 2017

in this case you would need to write your own special PropTypes function which react provides you to do. 

const TWO_NUMBERS = function(props, propName, componentName) {
  if (!Array.isArray(props.TWO_NUMBERS) || props.TWO_NUMBERS.length != 2 || !props.TWO_NUMBERS.every(Number.isInteger)) {
    return new Error(`${propName} needs to be an array of two numbers`);
  }

  return null
}

This would throw an error if TWO_NUMBERS isn't an array, isn't an array of two, and isn't an array of only integers.

you can get information about proptype functions here:

https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

its at the bottom of that example block.

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