Props Validation in ReactJS

by

React Props Validation
Props or “Properties” are read-only components, that gives a way to pass data from one component to other components. It is an immutable object that works similarly to the HTML attributes. The props cannot be modified from inside the component as they are immutable. Thus, it is required to use props validation to make code more readable and to avoid future bugs and problems. Prop validation is a tool that si used to force the correct usage of the components. App.propTypes is used for props validation. It is used to get the warnings on JavaScript console, if the props are passed with an invalid type.

Syntax: 

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

Props Validators:

 

PROPSTYPE VALUES
PropTypes.any Any data type.
PropTypes.array An array.
PropTypes.bool A boolean.
PropTypes.func A function.
PropTypes.number A number.
PropTypes.object An object.
PropTypes.string A string.
PropTypes.symbol A symbol.
PropTypes.instanceOf An instance of a particular JavaScript class.
PropTypes.isRequired Must be provided.
PropTypes.element Must be an element.
PropTypes.node Can render anything: numbers, strings, elements or an array (or fragment) containing these types.
PropTypes.oneOf() One of several types of specific values.
PropTypes.oneOfType([PropTypes.string,PropTypes.number]) An object that could be one of many types.

Example:
App.js:

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
render() {  
return (  

  

Validation under process.
  

  

  
Type  
Value  
Valid  

  

  
Array  
{this.props.propArray}  
{this.props.propArray ? "true" : "False"}  

  

  
Boolean  
{this.props.propBool ? "true" : "False"}  
{this.props.propBool ? "true" : "False"}                   

  

  
Function  
{this.props.propFunc(200)}  
{this.props.propFunc(200) ? "true" : "False"}  

  

  
String  
{this.props.propString}  
{this.props.propString ? "true" : "False"}  

  

  
Number  
{this.props.propNumber}  
{this.props.propNumber ? "true" : "False"}  

  

  

  
);  
}  
}  
App.propTypes = {  
propArray: PropTypes.array.isRequired,  
propBool: PropTypes.bool.isRequired,  
propFunc: PropTypes.func,  
propNumber: PropTypes.number,  
propString: PropTypes.string,   
}  
App.defaultProps = {  
propArray: [5,4,3,2,1],  
propBool: true,  
propFunc: function(x){return x+x},  
propNumber: 10,  
propString: "Hello",  
}  
export default App;

Main.js:

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

Output: 

Validation under process.
Type	  Value	  Valid
Array	  54321	  true
Boolean	  true	  true
Function  400	  true
String	  Hello	  true
Number	  10	  true

ReactJS Custom Validators:
To perform custom validation, a custom validation function can be created in ReactJS. A custom validation function in ReactJS contains the following arguments:

  • props: It is used to specify the first argument in the component.
  • propName: It is used to specify the name of the prop which is going to be validated.
  • componentName: It is used to specify the name of the component that is going to be validated again.