Type Checking With PropTypes

Introduction

Type Checking is a process of verifying that a piece of code is using the correct data types for variables, function parameters and return values. In the context of React applications, we are going to use PropTypes to do that job.

PropTypes is a way to type check the props that a React component receives. It helps to catch potential type errors during development, making it easier to spot and fix bugs. If you have used a linter in your previous React projects, there’s a good chance it ended up yelling at you about certain props missing in prop validation, however if that isn’t the case- well, lucky you!

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• Setting up PropTypes.
• Using common PropTypes features.

Getting started

To start using PropTypes in our React projects, we first need to install the corresponding library. We can do that with npm. In your React project run the following command:

npm install --save prop-types

Next, we want to import the PropTypes package in the component whose props we want to validate.

import PropTypes from 'prop-types';

Using propTypes

Here is a very basic example of how we would use it in a simple component that renders out a name prop.

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

const RenderName = (props) => {
  return <div>{props.name}</div>;
};

RenderName.propTypes = {
  name: PropTypes.string,
};

export default RenderName;

In this example, the component RenderName expects to receive a prop called name which is a string. If this prop is not a string, a warning will be displayed. If you want to make sure a prop is being passed in, use isRequired like so:

RenderName.propTypes = {
  name: PropTypes.string.isRequired,
}

Using defaultProps

Another cool thing we can do in combination with PropTypes is passing in default props:

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

const RenderName = (props) => {
  return <div>{props.name}</div>;
};

RenderName.propTypes = {
  name: PropTypes.string,
};

RenderName.defaultProps = {
  name: 'Zach',
};

export default RenderName;

In this example, with the help of the defaultProps property we are defining a default value for the name prop. This way, if the RenderName component is called without passing in the name prop, it will default to “Zach”. When you do pass in props, they will take precedence over the default props.

What about TypeScript?

Now is also a good time to mention TypeScript - a strongly typed language that builds on JavaScript. We don’t cover it in our curriculum yet, but it’s worth learning about it if you’d like more safety while writing your code.

Learning TypeScript can be a lot of overhead when you’re already learning React. Although, once you’re comfortable navigating the ins and outs of React, you’ll have a better time learning and applying TypeScript to your projects. If you go in the direction of learning TypeScript, our recommendation would be picking up a previous project and refactoring the components one by one to TypeScript. Learn by doing!

Assignment

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

• How would we set up a basic implementation of PropTypes?
• If we pass in a prop to a component that has a defaultProp defined, what would happen?
• What is the difference between PropTypes and TypeScript?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• It looks like this lesson doesn’t have any additional resources yet. Help us expand this section by contributing to our curriculum.