CodesJava

Easy learning with example program codes

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:

 

PROPSTYPEVALUES
PropTypes.anyAny data type.
PropTypes.arrayAn array.
PropTypes.boolA boolean.
PropTypes.funcA function.
PropTypes.numberA number.
PropTypes.objectAn object.
PropTypes.stringA string.
PropTypes.symbolA symbol.
PropTypes.instanceOfAn instance of a particular JavaScript class.
PropTypes.isRequiredMust be provided.
PropTypes.elementMust be an element.
PropTypes.nodeCan 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 (  
<div>  
<h2>Validation under process.</h2>  
<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(200)}</td>  
<td>{this.props.propFunc(200) ? "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: [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(<App/>, 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.
Please follow and like us:
error









Copyright © 2019 CodesJava DMCA.com Protection Status