ReactJS PropTypes

In our previous articles on Props, we had seen how to pass information to any Component using props. We had passed different types of information like integers, strings, arrays, etc. as props to the components. So, let’s recall the process of how we were passing these props to a component. We can either create defaultProps or have passed props directly as attributes to the components. We were passing props from outside a component and using them inside that component. But did we have checked what type of values we are getting inside our Component through props? No, we do not. But then also everything worked fine. 
It’s totally upon us whether we validate the data we are getting using props inside a Component or not. But for larger Apps, it is always a good practice to validate the data we are getting through props. This will help in debugging and also helps in avoiding bugs in the future. Let us see how to do this.

propTypes in React

Before the release of React 15.5.0 version propTypes is available in the react package but in later versions of React have to add a dependency in your project. You can add the dependency in your project by using the command given below:

npm install prop-types --save

We can use the propType for validating any data we are receiving from props. But before using it we will have to import it. Add the below line at the top of your index.js file : 

import PropTypes from 'prop-types';

Once we have imported propTypes we are ready to work with them. Just like defaultProps, propTypes are also objects where keys are the prop names and values are their types. Below syntax shows how to use propTypes: 

ComponentClassName.propTypes{
    
    propName1 : PropTypes.string,
    propName2 : PropTypes.bool,
    propName3 : PropTypes.array,
    .
    .
    .
    .
    propNamen : PropTypes.anyOtherType
}

In the above Syntax, the ComponentClassName is the name of the class of Component, anyOtherType can be any type that we are allowed to pass as props. For the props which do not validate the type of data specified by propTypes, a warning on the console will occur. Let us see a complete program that uses propTypes for validation for a better understanding: 

javascript

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';

// Component
class ComponentExample extends React.Component{
    render(){
        return(
                <div>

                    {/* printing all props */}
                    <h1>
                        {this.props.arrayProp}
                        <br />

                        {this.props.stringProp}
                        <br />

                        {this.props.numberProp}
                        <br />

                        {this.props.boolProp}
                        <br />
                    </h1>
                </div>
            );
    }
}

// Validating prop types
ComponentExample.propTypes = {
    arrayProp: PropTypes.array,
    stringProp: PropTypes.string,
    numberProp: PropTypes.number,
    boolProp: PropTypes.bool,
}

// Creating default props
ComponentExample.defaultProps = {

    arrayProp: ['Ram', 'Shyam', 'Raghav'],
    stringProp: "GeeksforGeeks",
    numberProp: "10",
    boolProp: true,
}

ReactDOM.render(
    <ComponentExample  />,
    document.getElementById("root")
);

Output: 

You can see in the above program that we are passing the prop named numberProp as a string but validating it as a number. Still, everything is rendered perfectly on the browser but our browser console has a warning message. This message clearly tells us that the prop named numberProp was expected to contain a numeric value but instead a string value is passed. You can go to the official doc of ReactJS to see all the valid types a prop can take.
Note: In recent versions of React the React.PropTypes is moved to a different package, and we will have to install that package separately in order to use it. Please go to https://www.npmjs.com/package/prop-types link for installation instructions.