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: