Validating Component Props

The enforcement of a prop 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 checking to see that propArray and propFunc are in fact the correct data types and are sent into the component when it is instantiated.

source code

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

Note however, the commented below will not cause an error:

ReactDOM.render(<MyComponent propArray={[1,2]} propFunc={function(){return 3;}} />, document.getElementById('app'));

React offers several built in validators (e.g., React.PropTypes[VALIDATOR]) which I outline below (Note that creating custom validators are possible as well.):

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.string`	If prop is used, verify it is a string
`React.PropTypes.bool`	If prop is used, verify it is a boolean
`React.PropTypes.func`	If prop is used, verify it is a function
`React.PropTypes.number`	If prop is used, verify it is a number
`React.PropTypes.object`	If prop is used, verify it is a object
`React.PropTypes.array`	If prop is used, verify it is a array
`React.PropTypes.any`	If prop is used, verify it is of any type

Required type validators:

React.PropTypes.[TYPE].isRequired Chaining 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.element`	Is a React element.
`React.PropTypes.node`	Is 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 values
`React.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!');
        }
      }
    }

7.6 Validating Component Props