Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

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:

PropsTypeDescription
propTypes.anyThe props can be of any data type.
propTypes.arrayThe props should be an array.
propTypes.boolThe props should be a boolean.
propTypes.funcThe props should be a function.
propTypes.numberThe props should be a number.
propTypes.objectThe props should be an object.
propTypes.stringThe props should be a string.
propTypes.symbolThe props should be a symbol.
propTypes.instanceOfThe props should be an instance of a particular JavaScript class.
propTypes.isRequiredThe props must be provided.
propTypes.elementThe props must be an element.
propTypes.nodeThe 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.

React Props Validation with Example
Reactjs Guru
Reactjs Guru

Welcome to React Guru, your ultimate destination for all things React.js! Whether you're a beginner taking your first steps or an experienced developer seeking advanced insights.

React tips & tutorials delivered to your inbox

Don't miss out on the latest insights, tutorials, and updates from the world of ReactJs! Our newsletter delivers valuable content directly to your inbox, keeping you informed and inspired.

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents