Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

react props validation

React Props Validation with Example

React Props are an important mechanism in our application, since they read-only and immutable, the React props validation becomes a big issue because props used to transfer data from one component to another component. If the component gets 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 of 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 warning in console. For example, if you set name should be string, but you pass something else like number then it will give you warning in console and also the result might get different. After you define patterns in 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 latest react installation as we have done, we don’t need to install propTypes library. In case if you don’t have 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 are available as 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 for propArray and propBool it must have the array and boolean propType in the prop.

react props validation
Default image
reactjsguru
Articles: 44

Leave a Reply

Your email address will not be published.