Validating Props
React Props are the main important mechanism for passing the read-only attributes to React components. The props are usually required to use correctly in the UI component. If it is not used correctly, the UI components may not behave as expected. Hence, it is required to use React props validation in improving react components.
React Props validation is a tool that will help the developers to avoid future bugs and problems. It is a useful way to force the correct usage of your React UI components. It makes your code more readable. React components used special property PropTypes that help you to catch bugs(errors) by validating data types of values passed through props, although it is not necessary to define components with propTypes. However, if you use propTypes with your UI components, it helps you to avoid unexpected bugs.
Validating PROPS:
React App.propTypes is used for props validation in react UI component. When some of the React props are passed with an invalid type, you will get the warnings on the JavaScript console. After specifying the props validation patterns, you will set the App.defaultProps.
Syntax:
class App extends React.Component { render() {} } Component.propTypes = { /*Definition */};
Example:
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> <h3>Array: {this.props.propArray}</h3> <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3> <h3>Func: {this.props.propFunc(3)}</h3> <h3>Number: {this.props.propNumber}</h3> <h3>String: {this.props.propString}</h3> <h3>Object: {this.props.propObject.objectName1}</h3> <h3>Object: {this.props.propObject.objectName2}</h3> <h3>Object: {this.props.propObject.objectName3}</h3> </div> ); } } App.propTypes = { propArray: React.PropTypes.array.isRequired, propBool: React.PropTypes.bool.isRequired, propFunc: React.PropTypes.func, propNumber: React.PropTypes.number, propString: React.PropTypes.string, propObject: React.PropTypes.object } App.defaultProps = { propArray: [1,2,3,4,5], propBool: true, propFunc: function(e){return e}, propNumber: 1, propString: "String value...", propObject: { objectName1:"objectValue1", objectName2: "objectValue2", objectName3: "objectValue3" } } export default App;
Main.jsx
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
OUTPUT:
SN | PropsType | Description |
1 | PropTypes.any | props can be of any data type. |
2 | PropTypes.array | props should be an array. |
3 | PropTypes.bool | props should be a boolean. |
4 | PropTypes.func | props should be a function. |
5 | PropTypes.number | props should be a number. |
6 | PropTypes.object | props should be an object. |
7 | PropTypes.string | props should be a string. |
8 | PropTypes.symbol | props should be a symbol. |
9 | PropTypes.instanceOf | instance of a particular JavaScript class. |
10 | PropTypes.isRequired | props must be provided. |
11 | PropTypes.element | props must be an element. |
12 | PropTypes.node | numbers, strings, elements or an array (or fragment) containing these types. |
13 | PropTypes.oneOf() | several types of specific values. |
14 | PropTypes.oneOfType([PropTypes.string,PropTypes.number]) | object that could be one of many types. |