As a developer working with React Components, I noticed developers usually don't think of adding validation to their components, which is fine for a simple application. As the app grows multiple developers start working towards a single goal; there are instances of the applications' stability to get compromised.

One of the reasons for this to happen is using incorrect type or not sending the required values which may result in unexpected behaviour.

Here PropTypes come into picture.

So... What is PropTypes?

To put it in simple terms, it's an added layer of checks to a component’s prop object. In other words, it makes sure we send all the necessary data in the correct type as props.

How do I set it up?

Setup is pretty straight forward. Here’s what you need to do. Open your favourite terminal and run the following commands.

cd <project_directory>
npm install prop-types --save

What’s next? An Example? Sure....

Let me walk you through a simple example which will make things clear. Let's say there is a List component and it does what it says, displays a list. Of what? Hmmm… let's say a list of the first 5 Marvel movies released. (Sorry DC fans.)

This list contains the names of movies and the year it was released.

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

Here is a code snippet that contains an array of objects with the name and release year of the first 5 marvel movies and a functional component that displays those values.

import PropTypes from "prop-types";

...

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

function Movie({ name, year = "Not specified" }) {
  return (
    <div>
      <p>
        <b>Name:</b> {name}
      </p>
      <p>
        <b>Year:</b> {year}
      </p>
      <hr />
    </div>
  );
}

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  year: PropTypes.string
};

...

If you have noticed I have removed all CSS. Why do you ask??? Because I am Batman.

Now, It looks pretty similar to how you would traditionally write but with one small addition at the end. Movie.propTypes allows us to add type checking and forces us to pass the required props.

You can also add Movie.defaultProps which will set the default value, but I didn’t add as JavaScript allows us to add a default value during object destructuring.

Here is how the error would look in the console.

Scenario 1: When the required prop is not passed.

Scenario 2: When the type of the prop do not match.

Don't worry, these errors wont show up in production. It’s meant to be caught during development.

What else can I do with it?

I have shown you the basics on how to get started and with this we have covered the basics and a little bit of intermediate stuffs. There is more to this and you can go through the documentation