Skip to content

Latest commit

 

History

History
134 lines (111 loc) · 4.29 KB

7.6.md

File metadata and controls

134 lines (111 loc) · 4.29 KB

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!');
	    }
	  }
	}