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:

PropsType	Description
propTypes.any	The props can be of any data type.
propTypes.array	The props should be an array.
propTypes.bool	The props should be a boolean.
propTypes.func	The props should be a function.
propTypes.number	The props should be a number.
propTypes.object	The props should be an object.
propTypes.string	The props should be a string.
propTypes.symbol	The props should be a symbol.
propTypes.instanceOf	The props should be an instance of a particular JavaScript class.
propTypes.isRequired	The props must be provided.
propTypes.element	The props must be an element.
propTypes.node	The props can render anything: numbers, strings, elements or an array (or fragment) containing these types.
propTypes.oneOf()	The props should be one of several types of specific values.
propTypes.oneOfType([propTypes.string,propTypes.number])	The props should be an object that could be one of many types.

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.