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 of 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 future. Let us see how to do this.

propTypes in React

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 it. 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 which we are allowed to pass as props. For the props which does not validates to 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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")
);

chevron_right


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 of 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 this link for installation instructions.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : YashRajBothra



Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.