React Props Validation

React Props Validation

As we know, props are a suitable mechanism for passing the read-only attributes to react components. The props are required to be correctly used in the component. If it is not correctly used, behavior of the component may not as expected. Therefore, it is essential to use props validation in improving react components.

Props validation is a tool that helps developers for avoiding future bugs and problems. It makes the code more readable. There is a special property used in React components that is PropTypes, which helps you in catching the bugs by validating data types of values passed through props, but it is not necessary to define components with PropTypes. However, if you are using PropTypes with your components, it will help you to avoid the unexpected bugs.

Validating Props

App.propTypes is used for validating the props in the react component. When an invalid type passes any of the props, it will show the warnings on the console of the JavaScript. Once the validation patterns are described, you will set the App.defaultProps.

Syntax:

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

Example:

In this example, there is an App component that contains all the props that we require. Here, App.propTypes is used for validating the props. For validating the props, you have to add the line: import PropTypes from ‘prop-types’ in the App.js file.

App.js

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

ReactJS Props validation example


Type
Value
Validity


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


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


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


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


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



); 
} 
}
App.propTypes = { 
propBool: PropTypes.bool.isRequired,
propArray: PropTypes.array.isRequired, 
propFunc: PropTypes.func, 
propNumber: PropTypes.number, 
propString: PropTypes.string, 
} 
App.defaultProps = { 
propBool: false,
propArray: [2,4,6], 
propFunc: function(x){return x+5}, 
propNumber: 6-6, 
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:

ReactJS Props Validators

The list of ReactJS props validators are as follows: