Type checking with propTypes on React components

When you are working with React in javascript, there is now type checking out of the box when you pass props. And the problem is that we could pass the wrong values to these props, or even forget to pass them at all. So, this is when propTypes comes to save us:

Let’s say that we have the next component:

function Message({subject, greeting}) {
  return <div className="message">{greeting}, {subject}</div>;
}

If we don’t pass the correct props, we won’t get the result that we want. So, we add the next code:

function Message({subject, greeting}) {
  return <div className="message">{greeting}, {subject}</div>;
}

Message.propTypes = {
  message(props, propName, componentName) {
    if (!props[propName]) {
      return new Error(`${propName} is required`)
    }
  }
}

Now, if we call the component without defining the subject prop:

<Message greeting="Hello" />

You will get the next warning:

Warning: Failed prop type: subject is in Message

One important thing is that React moved React.PropTypes to a different package since v15.5. In latest versions use prop-types library instead.

With this package you can make type checking like this:

import PropTypes from 'prop-types';

function Message({subject, greeting}) {
  return <div className="message">{greeting}, {subject}</div>;
}

Message.propTypes = {
    subject: PropTypes.element.isRequired,
    greeting: PropTypes.element.isRequired
};

And you will get this warning:

Warning: Failed prop type: The prop `subject` is marked as required in `Message`, but its value is `undefined`.
    in Message

Check more information in Typechecking With PropTypes – React.

I learned this on Get Really Good at React | Epic React by Kent C. Dodds 😃