Props Validation in ReactJS

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.