Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

ReactJS Props Validation

ReactJS Props Validation with ReactJS Tutorial, ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, AngularJS vs ReactJS, Reactnative vs ReactJS, ReactJS Router, ReactJS Flux Concept, ReactJS Animations, ReactJS Discussion, ReactJS Quick Guide, etc.

<< Back to REACT

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

App.propTypes is used for props validation in react component. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console. After specifying the validation patterns, you will set the App.defaultProps.


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

ReactJS Props Validator

ReactJS props validator contains the following list of validators.

SN PropsType Description
1. PropTypes.any The props can be of any data type.
2. PropTypes.array The props should be an array.
3. PropTypes.bool The props should be a boolean.
4. PropTypes.func The props should be a function.
5. PropTypes.number The props should be a number.
6. PropTypes.object The props should be an object.
7. PropTypes.string The props should be a string.
8. PropTypes.symbol The props should be a symbol.
9. PropTypes.instanceOf The props should be an instance of a particular JavaScript class.
10. PropTypes.isRequired The props must be provided.
11. PropTypes.element The props must be an element.
12. PropTypes.node The 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.


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.


import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
   render() {
      return (

ReactJS Props validation example

Type Value Valid
Array {this.props.propArray} {this.props.propArray ? "true" : "False"}
Boolean {this.props.propBool ? "true" : "False"} {this.props.propBool ? "true" : "False"}
Function {this.props.propFunc(5)} {this.props.propFunc(5) ? "true" : "False"}
String {this.props.propString} {this.props.propString ? "true" : "False"}
Number {this.props.propNumber} {this.props.propNumber ? "true" : "False"}
); } } App.propTypes = { propArray: PropTypes.array.isRequired, propBool: PropTypes.bool.isRequired, propFunc: PropTypes.func, propNumber: PropTypes.number, propString: PropTypes.string, } App.defaultProps = { propArray: [1,2,3,4,5], propBool: true, propFunc: function(x){return x+5}, propNumber: 1, propString: "JavaTpoint", } export default App;


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));


React Props Validation

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!');

Next TopicState Vs Props

Related Links:

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf