Validating Component Props

To enforce the proper usage of a prop within a component props can be validated when component instances are created.

When defining a component the propTypes configuration option can be used to identify if and how props should be validated. In the code example below I'm check to see that the propArray and propObject are in fact the correct data type and sent into the component when it is instantiated.

I am not sending the correct props as specified using propTypes to demonstrate that doing so will cause an error. The above code will result in the following error showing up in the console.

Warning: Failed propType: Invalid prop `propArray` of type `object` supplied to `MyComponent`, expected `array`

Warning: Failed propType: Required prop `propFunc` was not specified in `MyComponent`.

Uncaught TypeError: this.props.propFunc is not a function


React offers several built in validators (e.g.React.PropTypes[VALIDATOR]) which I outline below and the ability to create custom prop validators.

Basic type validators:

These validators check to see if the prop is a specific JS primitive. By default all these are optional. In other words, the validation only occurs if the prop is set.

React.PropTypes.stringIf prop is used, verify it is a stringReact.PropTypes.boolIf prop is used, verify it is a booleanReact.PropTypes.funcIf prop is used, verify it is a functionReact.PropTypes.numberIf prop is used, verify it is a numberReact.PropTypes.objectIf prop is used, verify it is a objectReact.PropTypes.arrayIf prop is used, verify it is a arrayReact.PropTypes.anyIf prop is used, verify it is of any type

Required type validators:

React.PropTypes.[TYPE].isRequiredChaining the .isRequired on to any type validation to make sure the prop is provided (e.g., propTypes:{propFunc:React.PropTypes.func.isRequired} )

Element validators:

React.PropTypes.elementIs a React element.React.PropTypes.nodeIs anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types.

Enumerables validators:

React.PropTypes.oneOf(['Mon','Fri'])Is one of several types of specific values.React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number])Is an object that could be one of many types

Array and Object validators:

React.PropTypes.arrayOf(React.PropTypes.number),Is an array containing only one type of values.React.PropTypes.objectOf(React.PropTypes.number)Is an object containing only one type of property valuesReact.PropTypes.instanceOf(People)Is object instance of specific constructor(uses `instanceof`)React.PropTypes.shape({color:React.PropTypes.string,size: React.PropTypes.number})Is object containing properties having a specific type

Custom validators:

function(props, propName, componentName){}Supply your own function. For example:
   propTypes: {
     customProp: function(props, propName, componentName) {
       if (!/matchme/.test(props[propName])) {
         return new Error('Validation failed!');
       }
     }
   }