React Props Validation

Props are an important mechanism for passing the read-only attributes to React components. The props are usually required to use correctly in the component. If it is not used correctly, the components may not behave as expected. Hence, it is required to use props validation in improving react components.

Props validation is a tool that will help the developers to avoid future bugs and problems. It is a useful way to force the correct usage of your components. It makes your code more readable. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes. However, if you use propTypes with your components, it helps you to avoid unexpected bugs.

Validating Props

In this example, we are creating App component with all the props that we need. App.propTypes is used for props validation. If some of the props aren’t using the correct type that we assigned, we will get a console warning. After we specify validation patterns, we will set App.defaultProps.

ReactJS Props Validator

SNPropsTypeDescription
1.PropTypes.anyThe props can be of any data type.
2.PropTypes.arrayThe props should be an array.
3.PropTypes.boolThe props should be a boolean.
4.PropTypes.funcThe props should be a function.
5.PropTypes.numberThe props should be a number.
6.PropTypes.objectThe props should be an object.
7.PropTypes.stringThe props should be a string.
8.PropTypes.symbolThe props should be a symbol.
9.PropTypes.instanceOfThe props should be an instance of a particular JavaScript class.
10.PropTypes.isRequiredThe props must be provided.
11.PropTypes.elementThe props must be an element.
12.PropTypes.nodeThe props can render anything: numbers, strings, elements or an array (or fragment) containing these types.
13.PropTypes.oneOf()The props should be one of several types of specific values.
14.PropTypes.oneOfType([PropTypes.string,PropTypes.number])The props should be an object that could be one of many types.

Example

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

App.js

import React from 'react';
import PropTypes from 'prop-types'; 
class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
   propObject: PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

ReactJS Custom Validators

ReactJS allows creating a custom validation function to perform custom validation. The following argument is used to create a custom validation function.

  • props: It should be the first argument in the component.
  • propName: It is the propName that is going to validate.
  • componentName: It is the componentName that are going to validated again.
var Component = React.createClass({  
App.propTypes = {  
   customProp: function(props, propName, componentName) {  
        if (!item.isValid(props[propName])) {  
          return new Error('Validation failed!');  
        }  
      }  
   }  
}) 
0 0 vote
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x