React JS Props Validation

Props Validation in React JS: Props in React JS 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.

For the developers, the props validation is a tool that helps to avoid bugs and other problems in the future. This helps to make use of components incorrect way which makes the code readable. The propTypes is the special property that helps to identify the bugs by validating the values of data types in props and also no need to define the components in propTypes which helps to avoid unnecessary bugs.

Validating Props in React JS

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 JavaScripts console. After completion of providing the validation pattern set the App.defaultProps.

Validating Props Syntax

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

ReactJS Props Validator

ReactJS props validator contains the list of validators.

PropsType Description

1. PropTypes.any –The props can be of any data type.
2. PropTypes.array- The props should be an array.
3. PropTypes.bool –The props should be a boolean.
4. PropTypes.func –The props should be a function.
5. PropTypes.number- The props should be a number.
6. PropTypes.object- The props should be an object.
7. PropTypes.string –The props should be a string.
8. PropTypes.symbol- The props should be a symbol.
9. PropTypes.instanceOf –The props should be an instance of a particular JavaScript class.
10. PropTypes.isRequired –The props must be provided.
11. PropTypes.element- The props must be an element.
12. PropTypes.node- The props can render anything: numbers, strings, elements or an array (or fragment) containing these types.
13. PropTypes.oneOf()- The props should be one of several types of specific values.
14. PropTypes.oneOfType([PropTypes.string,PropTypes.number])- The props should be an object that could be one of many types.

Props Validation Example

Here, we are providing code to create App component with all the props in it. For validations, you need to use App.propTypes and must and should add this line: import PropTypes from ‘prop-types’ in App.js file.

//App.js

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(5)}</td>
<td>{this.props.propFunc(5) ? "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: [1,2,3,4,5],
propBool: true,
propFunc: function(x){return x+5},
propNumber: 1,
propString: "JavaTpoint",
}
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'));

Props Validation Example Output

Props Validation Example Output

ReactJS Custom Validation

To perform custom validation, React JS allows to create custom validation function.

The following are required to create 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.

ReactJS Custom Validation Example

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