|
| 1 | +# Validating Component Props |
| 2 | + |
| 3 | +`props` can be validated when component instances are created. |
| 4 | + |
| 5 | +When defining a component, the `propTypes` configuration option can be used to identify if and how props should be validated. |
| 6 | + |
| 7 | +In the 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: |
| 8 | + |
| 9 | +<p data-height="265" data-theme-id="dark" data-slug-hash="NMoXwQ" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="NMoXwQ" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/NMoXwQ/">NMoXwQ</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p> |
| 10 | +<script async src="https://static.codepen.io/assets/embed/ei.js"></script> |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | +``` |
| 15 | +"Warning: Failed prop type: Invalid prop `propArray` of type `object` supplied to `MyComponent`, expected `array`. |
| 16 | + in MyComponent" |
| 17 | +
|
| 18 | +"Warning: Failed prop type: The prop `propFunc` is marked as required in `MyComponent`, but its value is `undefined`. |
| 19 | + in MyComponent" |
| 20 | +``` |
| 21 | + |
| 22 | +Note however, the commented below will not cause an error: |
| 23 | + |
| 24 | +``` |
| 25 | +ReactDOM.render(<MyComponent propArray={[1,2]} propFunc={function(){return 3;}} />, document.getElementById('app')); |
| 26 | +``` |
| 27 | + |
| 28 | +React offers several built in validators (e.g. `PropTypes[VALIDATOR]`) which I outline below (Note that creating custom validators are possible as well.): |
| 29 | + |
| 30 | +## Basic type validators |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +| Type | Description | |
| 35 | +|:--------------|:--------------| |
| 36 | +| PropTypes.string | If prop is used, verify it is a string | |
| 37 | +| PropTypes.bool | If prop is used, verify it is a boolean | |
| 38 | +| PropTypes.func | If prop is used, verify it is a function | |
| 39 | +| PropTypes.number | If prop is used, verify it is a number | |
| 40 | +| PropTypes.object | If prop is used, verify it is a object | |
| 41 | +| PropTypes.array | If prop is used, verify it is a array | |
| 42 | +| PropTypes.any | If prop is used, verify it is of any type | |
| 43 | + |
| 44 | +## Required type validators |
| 45 | + |
| 46 | +| Type | Description | |
| 47 | +|:--------------|:--------------| |
| 48 | +| 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} ) | |
| 49 | + |
| 50 | +## Element validators |
| 51 | + |
| 52 | +| Type | Description | |
| 53 | +|:--------------|:--------------| |
| 54 | +| PropTypes.element | Is a React element. | |
| 55 | +| PropTypes.node | Is anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types. | |
| 56 | + |
| 57 | +## Enumerables validators |
| 58 | + |
| 59 | +| Type | Description | |
| 60 | +|:--------------|:--------------| |
| 61 | +| React.PropTypes.oneOf(['Mon','Fri']) | Is one of several types of specific values. | |
| 62 | +| React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number]) | Is an object that could be one of many types. | |
| 63 | + |
| 64 | +## Array and Object validators |
| 65 | + |
| 66 | +| Type | Description | |
| 67 | +|:--------------|:--------------| |
| 68 | +| React.PropTypes.arrayOf(React.PropTypes.number) | Is an array containing only one type of values. | |
| 69 | +| React.PropTypes.objectOf(React.PropTypes.number) | Is an object containing only one type of property values | |
| 70 | +| React.PropTypes.instanceOf(People) | Is object instance of specific constructor(uses `instanceof`) | |
| 71 | +| React.PropTypes.shape({color:React.PropTypes.string,size: React.PropTypes.number}) | Is object containing properties having a specific type | |
| 72 | + |
| 73 | +## Custom validators |
| 74 | + |
| 75 | +| Type | Description | |
| 76 | +|:--------------|:--------------| |
| 77 | +| function(props, propName, componentName) {} | propTypes: { customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); }}} | |
0 commit comments