Type Checking with PropTypes

Implementing PropTypes in React

Before we learn how to implement PropTypes in React, we need to install the npm prop-types package first. 

Using npm:
npm install prop-types --save


Using Yarn:
yarn add prop-types 

You can also try this code with Online Javascript Compiler

Run Code

To understand the primary use case of PropTypes, we will use the help of the following example. 

If we use PropTypes to validate a variable as an integer but intentionally pass a string to it, even though everything would be perfectly rendered on the browser, the console would have a warning message. 

import React from 'react';
import ReactDOM from 'react-dom';
// We need to import the PropTypes package before  using it.
import PropTypes from 'prop-types'; 


// Using a Class based Component
class ExampleOne extends React.Component{
    render(){
        return(
        <div>
        {/* printing all props */}
        <h1>
        {this.props.exampleProp}
        </h1>
        </div>
    );
}
}


// Validating prop types
ExampleOne.propTypes = {
exampleProp: PropTypes.number // Validating it as a number
}


// Creating default props
ExampleOne.defaultProps = {
exampleprop: "String as Example"
}


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

You can also try this code with Online Javascript Compiler

Run Code

When we run this application, "String as Example" is rendered as a <h1> tag on the browser. But, along with that, the console throws a warning which says that exampleProp is supposed to be an integer. This is extremely helpful when we need to debug our react code.

Console error thrown when the above code is run

This example taught us how to use PropTypes in a class-based react component. 

Default Prop Values

In the above example, you can see that we have used a defaultProps() function. This method is a pre-built React entity. Using defaultProps(), we can define default values to our props. The defaultProps() would ensure that the variable has a value in case the parent component does not define it. TypeChecking with PropTypes also works on default props. 

// Creating default props
ExampleOne.defaultProps = {
exampleprop: "String as Example"
}

You can also try this code with Online Javascript Compiler

Run Code

Static PropTypes

A new feature that was absent till the ES5 engine is the static keyword. The static property changes the implementation in such a way that the validation using propTypes goes directly into the class name, not the instance of the class.

// Creating static default props
static defaultProps = {
exampleprop: "String as Example"
}

Using PropTypes in Functional Components

PropTypes can be directly implemented inside function-based react components. Let us learn the implementation through the following example:

import React from 'react'
import PropTypes from 'prop-types'


// Function-based component
function ExampleTwo(props) {
return (
    <div>
        {/* Printing the props */}
        <h1>
        {props.exampleProp}
        </h1>
    </div>
)
}


// Creating default props
ExampleTwo.defaultProps = {
exampleProp: "String as Example"
}


// Validating prop types
ExampleTwo.propTypes = {
exampleProp: PropTypes.number
}


export default ExampleTwo;

You can also try this code with Online Javascript Compiler

Run Code

We have implemented the same code as Example One in the above example but using a function-based react component. If you look carefully, you will notice that we can implement PropTypes directly inside the function itself. The output is as expected. "String as Example" gets rendered on the browser in a <h1> tag, but the console throws a warning. 

Warning thrown by console 

This is how PropTypes can be implemented in React. Given below is a list of PropTypes validations that react offers developers.

List of Various PropTypes Validations

Given below is a list of some commonly used PropTypes variations.

• PropTypes.func: This validates whether the prop is a function.
• PropTypes.array: This validates whether the prop is an Array.
• PropTypes.number: This validates whether the prop is a number.
• PropTypes.object: This validates whether a prop is an Object.
• PropTypes.string: This validates whether the prop is a string.
• PropTypes.bool: This validates whether the prop is a bool.

Frequently Asked Questions

1. What is the PropTypes.element property?
The PropTypes.element property is a pre-built method in React prop-types that ensures that only a single child is passed to the parent component.

2. Can we use PropTypes if we are directly exporting the component?
No! To use PropTypes, components must be defined in separate functions and then exported separately, as shown in the examples above.

3. What is the use of isRequired?

The isRequired tag ensures that the prop is being sent. If that prop isn’t provided, a warning is shown on the console. 

4. What is the difference between props and propType?

Props in React are the arguments or data that we pass to different components. On the other hand, propTypes is a feature of React that allows us to validate what type of data is being passed as props. 

Key Takeaways

This blog explained the concept of TypeChecking with PropTypes in React. To sum it up, we need PropTypes because, in Javascript, the data type of variables is determined only at the time of execution. PropTypes help us check what kind of data is being passed through props in different components. We also looked into the implementation of PropTypes in both class and function-based react components. 

To become an even better React developer, you can use the following course!