Props Validation in ReactJS

Props Validation in ReactJS: Props play a vital role to pass the read-only attributes. The props must and should use correctly otherwise unexpected behavior may rise. Hence, props validation is important to improve react components.
Props validation is a tool that will help developers to avoid future bugs and problems. It is a useful way to force the correct usage of your components. It makes your code more readable. React components used special property PropTypes that help you to catch bugs 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 components, it helps you to avoid unexpected bugs.

React JS Props Validation with — Props Validation | LearnCodeWeb

Table of Contents

Why should you validate props in React?

When developing a React application, you’ll need to structure and define your props to avoid bugs and errors. Just like a function might have mandatory arguments, a React component might require a prop to be defined, otherwise, it will not render properly. Forgetting to pass a required prop into a component that needs it could cause your app to behave unexpectedly.

Validating Props in React

To validate props in react components with the help of App.propTypes. In case some props are provided invalid then you will get warnings on the JavaScript console. After completion of providing the validation pattern set the App.defaultProps.

Syntax:

class App extends React.Component {  
          render() {}  
}  
Component.propTypes = { /*Definition */};

Props Validation Example

In this example, we are creating an App component with all the props that we need. App.propTypes is used for props validation. If some of the props aren’t using the correct type that we assigned, we will get a console warning. After we specify validation patterns, we will set App.defaultProps. For props validation, you must have to add this line: import PropTypes from ‘prop-types’ in App.js file.

App.js File

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>ReactJS Props validation example</h1>  
              <table>  
                  <tr>  
                      <th>Type</th>  
                      <th>Value</th>  
                      <th>Valid</th>  
                  </tr>  
                <tr>  
                      <td>Array</td>  
                      <td>{this.props.propArray}</td>  
                      <td>{this.props.propArray ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Boolean</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Function</td>  
                      <td>{this.props.propFunc(1)}</td>  
                      <td>{this.props.propFunc(1) ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>String</td>  
                      <td>{this.props.propString}</td>  
                      <td>{this.props.propString ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Number</td>  
                      <td>{this.props.propNumber}</td>  
                      <td>{this.props.propNumber ? "true" : "False"}</td>  
                  </tr>  
             </table>  
        </div>  
        );  
   }  
}  
App.propTypes = {  
    propArray: PropTypes.array.isRequired,  
    propBool: PropTypes.bool.isRequired,  
    propFunc: PropTypes.func,  
    propNumber: PropTypes.number,  
    propString: PropTypes.string,   
}  
App.defaultProps = {  
    propArray: [Apple,Banana,Orange,Guava,Strawberry],  
    propBool: true,  
    propFunc: function(z){return z+1},  
    propNumber: 7,  
    propString: "TechieBundle",  
}  
export default App;

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));

ReactJS Custom Validation

To perform custom validation, React JS allows to create custom validation function.
The following arguments are required to create a validation function:-

props: Must be the first argument in the component.
propName: propName which helps to validate.
componentName: It is also used to validate again

var Component = React.createClass({  
App.propTypes = {  
   customProp: function(props, propName, componentName) {  
        if (!item.isValid(props[propName])) {  
          return new Error('Validation failed!');  
        }  
      }  
   }  
})

React create-react app
React JSX | JavaScript XML
ReactJS Props | Understand all about Props