Typechecking in react using propTypes :

Typechecking means validation of a specific type before using it. For example, if one component of your application is showing one string line, then typechecking will verify if the value we are trying to show is actually a valid string or not. If any other types of values like a number is passed, it will show one warning message on the console.

Typechecking not only helps you to avoid bugs, but it is also equally helpful for readability and maintenance of your code. Normally, we pass different information to a component using props. We can either create defaultProps or pass the props directly to any of the components. We can add typechecking to the props in a component. If we add typechecking, it will verify the contents of the props before using any of them.

How to typecheck using propTypes :

React comes with one in-build package for typechecking called propTypes. Using it, we can run typechecking for props in a component. We can also assign default values for props if typecheck is failed. In this post, we will learn how to use propTypes

Create a react App :

Let me show you how propTypes works with one simple example. For this example, I am using create-react-app to create one React application. First of all, create one React application and run it using npm start. By default, it will start your app on 3000 port. App.js file is the default javascript file used for the home page. Change this file like below :

import React, { Component } from "react";
import "./App.css";
import HomeComponent from "./HomeComponent";

class App extends Component {
  render() {
    return ;
  }
}

export default App;

Create one new file called HomeComponent.js and put the below code in this file :

import React, { Component } from "react";

class HomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      heading: this.props.heading,
      value: this.props.value
    };
  }
  render() {
    return (
      <div>
        <h1>{this.state.heading}</h1>
        <p>{this.state.value}</p>
      </div>
    );
  }
}

export default HomeComponent;

So, HomeComponent is the component we are using in the App component. We are passing two values as props : heading and value and showing them inside HomeComponent. Refresh your browser and you will see something like below :

Now, change the return statement in App.js as below :

return <HomeComponent value={"this is a heading"} heading={20} />;

Refresh your browser : As you can see that the heading and value is changed as we have changed their values while initializing the component HomeComponent. But we were expecting string for heading and number for value, right? So, don’t you think we should print one error message instead of printing the wrong value? Let’s do that :

Using propTypes :

For using propTypes , we need to import it first. Add the below import line to your HomeComponent :

import PropTypes from 'prop-types';

Now, define what type of value we are expecting in the props :

HomeComponent.propTypes = {
  heading: PropTypes.string.isRequired,
  value: PropTypes.number
};

And, finally add some default props :

HomeComponent.defaultProps = {
  heading: "Prop type not found",
  value: -1
};

Now, refresh the app with the return statement in App.js as below :

return <HomeComponent value={"this is a heading"} heading={20} />;

It will show the values but throw one warning on the console like below :

That’s it. If you are returning the without any props, it will show the default values we have defined above.

Conclusion :

Typecheckng is a good coding practice in any programming language. If you are developing React apps, always try to use propTypes on each component. In this example, we have checked only for string and number, but propTypes also provides a lot of different other typechecking validators. You can check this link for more info on proptypes.