[Solved]-React proptype array with shape-Reactjs

if i am to define the same proptypes for a particular shape multiple times, i like abstract it out to a proptypes file so that if the shape of the object changes, i only have to change the code in one place. it helps dry up the codebase a bit.

example:

// inside my proptypes.js file
import pt from 'prop-types';

export const product = {
  id: pt.number.isrequired,
  title: pt.string.isrequired,
  sku: pt.string.isrequired,
  description: pt.string.isrequired,
};


// inside my component file
import pt from 'prop-types';
import { product } from './proptypes;


list.proptypes = {
  productlist: pt.arrayof(product)
}

this was my solution to protect against an empty array as well:

import react, { component } from 'react';
import { arrayof, shape, string, number } from 'prop-types';

reactcomponent.proptypes = {
  arraywithshape: (props, propname, componentname) => {
    const arraywithshape = props[propname]
    proptypes.checkproptypes({ arraywithshape:
        arrayof(
          shape({
            color: string.isrequired,
            fontsize: number.isrequired,
          }).isrequired
      ).isrequired
    }, {arraywithshape}, 'prop', componentname);
    if(arraywithshape.length < 1){
      return new error(`${propname} is empty`)
    }
  }
}

there's a es6 shorthand import, you can reference. more readable and easy to type.

import react, { component } from 'react';
import { arrayof, shape, number } from 'prop-types';

class examplecomponent extends component {
  static proptypes = {
    annotationranges: arrayof(shape({
      start: number,
      end: number,
    })).isrequired,
  }

  static defaultprops = {
     annotationranges: [],
  }
}

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

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

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 npm
reactcomponent.proptypes = {
   arraywithshape: proptypes.arrayof(proptypes.shape({
     color: proptypes.string.isrequired,
     fontsize: proptypes.number.isrequired,
   })).isrequired,
}