React Props Validation with Example

React Props are an important mechanism in our application, since they are read-only and immutable, the React props validation becomes a big issue because props are used to transfer data from one component to another component. If the component gets the wrong data, or you can say data type, then it leads to bugs or unexpected errors. Since JavaScript doesn’t have an inbuilt type-checking system, developers decided to use flow, typescript type extensions to check.

React Props validation can be described as a program that can assist developers in avoiding any future bugs or issues. It’s a great tool to enforce the correct use of your components. React components have unique properties called propType. PropTypes help you identify bugs by validating data types of the values transmitted through props. However, it isn’t necessary to create components that use propTypes. If you do use propTypes in the components you make, this will help you to prevent unexpected bugs.

React Props Validation

propTypes is used to verify the input type for props in react. If you try to put any other type, then it will give you a warning in the console. For example, if you set the name to a string, but you pass something else like a number then it will give you a warning in the console, and also the result might get different. After you define patterns for propTypes you should set default values for props as well.

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

This is the syntax for validation, here to access propTypes you need component.propType.

How To Use propTypes Validators?

In the latest react installation as we have done, we don’t need to install the propTypes library. In case you don’t have the propTypes library, you have to write this command in the cmd:

npm install prop-types --save

Now if we want to use propTypes in our app, we have to import with this code:

import PropTypes from 'prop-types';

React Props Validators

In react, there are some validators available as the following list:

Example

import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
	return (
	<div>
		<h2>ReactJS Props validation example</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(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>
	);
}
}

// Prop types for our Component
App.propTypes = {
propArray: PropTypes.array.isRequired,
propBool: PropTypes.bool.isRequired,
propFunc: PropTypes.func,
propNumber: PropTypes.number,
propString: PropTypes.string,
}

// Default Props for our Component
App.defaultProps = {
propArray: [1, 2, 3, 4, 5],
propBool: true,
propFunc: function (x) { return x * 10 },
propNumber: 1,
propString: "ReactjsGuru",
}

export default App;

In this above example, we have used some validations, as you can see in app.propTypes we have propArray and propBool have isRequired propType this means that propArray and propBool must have the array and boolean propType in the prop.