I have an array with this shape :

dataSource: PropTypes.arrayOf(
        PropTypes.shape({
          share: PropTypes.number,
          visibleInLegend: PropTypes.bool,
          order: PropTypes.number,
          color: PropTypes.string
        })

Now, I want to limit the lenght to be only 2. I replaced the last proptype with a function like this :

dataSource: function(props, propName, ponentName) {
    let arrayPropLength = props[propName].length;
    if (arrayPropLength !== 2) {
      return new Error(
        `Invalid array length ${arrayPropLength} (expected 2 for prop ${propName} supplied to ${ponentName}. Validation failed.`
      );
    }
  }

The two checks work fine, however this will test only the length of array and I want to bine both of them into a function ? to be something like this :

dataSource: function(props, propName, ponentName) {
props[propName].PropTypes.shape({
              share: PropTypes.number,
              visibleInLegend: PropTypes.bool,
              order: PropTypes.number,
              color: PropTypes.string
            })
        let arrayPropLength = props[propName].length;
        if (arrayPropLength !== 2) {
          return new Error(
            `Invalid array length ${arrayPropLength} (expected 2 for prop ${propName} supplied to ${ponentName}. Validation failed.`
          );
        }
      }

I have an array with this shape :

dataSource: PropTypes.arrayOf(
        PropTypes.shape({
          share: PropTypes.number,
          visibleInLegend: PropTypes.bool,
          order: PropTypes.number,
          color: PropTypes.string
        })

Now, I want to limit the lenght to be only 2. I replaced the last proptype with a function like this :

dataSource: function(props, propName, ponentName) {
    let arrayPropLength = props[propName].length;
    if (arrayPropLength !== 2) {
      return new Error(
        `Invalid array length ${arrayPropLength} (expected 2 for prop ${propName} supplied to ${ponentName}. Validation failed.`
      );
    }
  }

The two checks work fine, however this will test only the length of array and I want to bine both of them into a function ? to be something like this :

dataSource: function(props, propName, ponentName) {
props[propName].PropTypes.shape({
              share: PropTypes.number,
              visibleInLegend: PropTypes.bool,
              order: PropTypes.number,
              color: PropTypes.string
            })
        let arrayPropLength = props[propName].length;
        if (arrayPropLength !== 2) {
          return new Error(
            `Invalid array length ${arrayPropLength} (expected 2 for prop ${propName} supplied to ${ponentName}. Validation failed.`
          );
        }
      }

• javascript
• reactjs
• react-proptypes

2 Answers 2

I think checkPropTypes API may be used in this case. You keep your custom function but you also run checkPropTypes one.

const myPropTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  // ... define your prop validations
};

const props = {
  name: 'hello', // is valid
  age: 'world', // not valid
};

// Let's say your ponent is called 'MyComponent'

// Works with standalone PropTypes
PropTypes.checkPropTypes(myPropTypes, props, 'prop', 'MyComponent');
// This will warn as follows:
// Warning: Failed prop type: Invalid prop `age` of type `string` supplied to
// `MyComponent`, expected `number`.

From the official doc here https://github./facebook/prop-types#proptypescheckproptypes

Let's go functional!

And sorry, I didn't test it.. But I think you get the approach

function arrayOfLengthOf(n, shape) {
  return function(props, propName, ponentName) {
    return PropTypes.arrayOf(shape).call(arguments) &&
      arrayOfLength(n)(props, propName);
  }
}

function arrayOfLength(n) {
  return function(props, propName) {
    if (props[propName].length !== n) {
      throw new Error('...');
    }

    return true;
  }
}

dataSource: arrayOfLengthOf(2,
        PropTypes.shape({
          share: PropTypes.number,
          visibleInLegend: PropTypes.bool,
          order: PropTypes.number,
          color: PropTypes.string
        })