ReactJS | PropTypes

20 Jan, 2021
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'; // Componentclass 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 typesComponentExample.propTypes = {    arrayProp: PropTypes.array,    stringProp: PropTypes.string,    numberProp: PropTypes.number,    boolProp: PropTypes.bool,} // Creating default propsComponentExample.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. 
YashRajBothra
shubhamyadav4
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?