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:

    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:





import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
// Component
class ComponentExample extends React.Component{
                    {/* printing all props */}
                        <br />
                        <br />
                        <br />
                        <br />
// 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,
    <ComponentExample  />, 



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

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to 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 :


Please write to us at to report any issue with the above content.