Validate Custom React Component Props with PropTypes

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

In this lesson, we'll learn how you can use the prop-types module to validate a custom React component's props. We will start by building out a Proptypes object that throws an error if the prop passed is not of the required type. Then, we will import the React team's prop-types module and look at some of the useful utilities it provides like isRequired. Function components define Proptypes off of a property while Class components define Proptypes off of a static method.

Tushar Chhibber
Tushar Chhibber
~ 4 years ago

When I use SayHello.propTypes = {
firstName(props, propName, componentName) { console.log('Hello') } }

This function is not getting called. Can anyone help me regarding this.

Tushar Chhibber
Tushar Chhibber
~ 4 years ago

Found the issue, I was using production react and react dom scripts. Silly me

ahmeddotkom
ahmeddotkom
~ 3 years ago

If propTypes are not supported, how can we validate props in production?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

You shouldn't validate props in production. They add a LOT of unnecessary work because they're intended for development-only. Why would you want to? Just make sure that you have no proptypes warnings in development and you shouldn't have any in production.

Jonathan Soifer
Jonathan Soifer
~ 3 years ago

@ahmeddotkom:

I believe the key is here:

make sure that you have no proptypes warnings in development and you shouldn't have any in production.

The development environment , when the software is running only in our own computers and not being used by our clients/customers/users is the appropriate place to test and check if there are any errors.

Using prop-types is the way we make sure those errors aren't happening. When we find them, we fix them. Once they are removed in the development environment they are removed once and for all, so no need to check again in the production environment .

ahmeddotkom
ahmeddotkom
~ 3 years ago

Yeah makes sense, thanks.

Mat Longinow
Mat Longinow
~ 3 years ago

I'm having trouble with the Error message. Mine is displaying this...

Warning: Failed prop type: Hey, you should pass a string for ${propName} in ${componentName} but you passed a ${typeof props[propName]}! in SayHello

I put my current code on a jsfiddle: https://jsfiddle.net/qms7d56x/

Any help would be appreciated!

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Looks like you're using a normal string when you should be using a template literal with back-tics (`).

Lokesh Sanapalli
Lokesh Sanapalli
~ 3 years ago

I am getting "PropTypes not defined" error, please help!!!

https://q5lop2ykj.codesandbox.io/

Tony Brown
Tony Brown
~ 3 years ago

I am getting "PropTypes not defined" error, please help!!!

https://q5lop2ykj.codesandbox.io/ @Lokesh This link is dead

Daniel
Daniel
~ 3 years ago

Why does your implementation of 'propTypes' throw an Error when you actually never call it? Seems like more of a JS thing then React (yea, I know React is just JS haha).

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

React will call it for us (in development mode)!

mdondorf-anynines
mdondorf-anynines
~ 3 years ago

Hey Kent, in your first transcript code example, you're missing a comma:

reactDOM.render( <SayHello firstName={true} />, document.getElementById('root') )

mdondorf-anynines
mdondorf-anynines
~ 3 years ago

Hey Kent, in your first transcript code example, you're missing a comma:

reactDOM.render( <SayHello firstName={true} />, document.getElementById('root') )

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Thanks! Will fix.

celipas
celipas
~ 2 years ago

Hi! reactDOM is not defined. I believe it should be ReactDOM is not defined

Sam Huang
Sam Huang
~ 2 years ago

Hello Kent, (following up with @celipas) In your first code snippet, you had

reactDOM.redner() instead of ReactDOM.render() the R should be capitalize

Modesta Naciute
Modesta Naciute
~ 2 years ago

Just an FYI, in transcript, thecode under <code>class SayHello extends React.Component</code> should be <code> Hello {firstName} {lastName}! </code>

Andy Elion
Andy Elion
~ 2 years ago

Script for prop-types should be

<script src="https://unpkg.com/prop-types@15.6.0/prop-types.js"></script>
Stacie
Stacie
~ 2 years ago

The unpkg script wasn't working for me. I changed to this source and it works: https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js

Keith Price
Keith Price
~ 2 years ago

It would be helpful if you didn't use features in your modules unless you also explain them. In this case, you used back-ticks and just whizzed by it without mentioning it at all. That makes it really hard to follow when you're a beginner.

~ a year ago

Update paths to point to development version:

<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>

When I use SayHello.propTypes = {
firstName(props, propName, componentName) { console.log('Hello') } }

This function is not getting called. Can anyone help me regarding this.