Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "PropTypes" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

PropTypes are a useful method for enforcing data integrity within a component. They are used to identify properties that can be passed to the component. The PropTypes declaration can also specify data type as well as if the property is required.

Get Unlimited Access Now

Transcript from the "PropTypes" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Okay so we're gonna say ShowCard .propTypes = show: React.PropTypes. This is my biggest pet peeve with React is this one's lower case. This one's upper case and you just have to remember that and I hate it. But that's how it is so #DealWithIt.
>> Speaker 2: Is it supposed to be ShowCard?

[00:00:30]
>> Brian Holt: Yes. React.propTypes, where I'm I? object, okay, so what this is bit this is giving React a little helper to help you debug it right. So you're basically telling hey React, you're going to getting something called show in your props and if it's not an object, I need you to blow up, not blow up but actually just gives you a warning in the console like hey you said this was going to be an object and it was definitely a boolean so you might have a bug going on here.

[00:01:07]
>> Speaker 3: Is there reason we're not doing this in showcard.jsx?
>> Brian Holt: Yeah. I’m sorry. I'm totally in the wrong file. I probably need a break more than any of you.
>> All: [LAUGH]
>> Brian Holt: Okay, sorry. So we're gonna be in show card
>> Brian Holt: So ShowCard, and you just stick it on here.

[00:01:32]
>> Brian Holt: So yeah, this is basically typing thing for Reacts, right? Now, you actually can't really have a ShowCard without a show right? That just doesn't make any sense like this component falls apart if it does not get a show. So you can actually even go one step further and say isRequired.

[00:01:54] So if you leave off that, it's optional.
>> Brian Holt: And if you put that on there, then is going to say, hey you said this is gonna be here and it was not here, so I'm gonna yell at you. Okay, so save that and now, notice all of our linting errors, no that's still getting linting errors.

[00:02:28]
>> Brian Holt: Right, those go underneath, right. Let me just make sure I always get sure it's like should it go above or go below.
>> Brian Holt: So there we go. That works. So that's what that's saying is like our one of our standard rules for standard React is that you must put propType validations on everything and it's going to save you bugs in the future, I promise.

[00:02:57] So it's a good habit to get into.
>> Brian Holt: So if you refresh that, it doesn't actually do anything for your program. It doesn't make it any faster or anything like that. It just makes it a little bit easier to debug. In fact, what they suggest is, when you're shipping this out to production, actually go out back and strip out your prop types.

[00:03:18] Because there's no point in a user getting all your prop types, right? It doesn't help them at all. Is gonna show you one more thing before you broke. And I'm gonna show what the error looks like. So, let's go to search.jsx. What I'm gonna do here, you don't have to do this I'm gonna show you what it looks like and I'm just gonna put a show card with nothing on it.

[00:03:45] Save that like that will compile just fine rather there's no issue with that, but if we refresh here, it's gonna give me a failed prop type right here like hey you said this is required and it's no longer there, like what the hell is going on? What's wrong with you?

[00:04:05] Please give that to me in the future, right? And then like once it actually tries to reference posters, it's not there then the whole thing crashes, right? But this actually gives you, this is kind of a amorphous error. This is a pretty solid errors like I expected this and you didn't give it to me.

[00:04:21] So that's why I think it's really cool. Someone asked the astute question of, I want to pass down the individual properties rather than just like show as an entire object and luckily, we have some yes six magic that we can do to make that really easy to do.

[00:04:36] So, let's go over to our search.jsx. So notice we're passing show the entire object down. Now you can actually go through if you really want to and say poster equals show.poster. Title equals show.title, etc., etc. That's a little, it's too much typing for my lazy fingers, right? Cuz it can end up being a lot.

[00:05:03] So what you can actually do is what's called the spread operator. And you can say, just {...show}. And what this is gonna do is, it's gonna take everything that you have right inside of show, and it's gonna spread it out, right? So this would be the exact same as saying show={show.poster} for every single thing inside of show.

[00:05:28] But here, you're actually telling jsx. This is not really a ES6 feature, but it's mimicking what ES6 does. And it just spreads it out over the entire object so instead of so say that. Come over here to ShowCard. Instead of saying props.show.title, now we could just say props.title which is kind of nice right?

[00:05:53] You're cutting all this additional stuff out of the middle.
>> Speaker 5: What about your constraint there at the bottom? The show?
>> Brian Holt: This PropTypes? We have to fix that or else it's going to blow up which is also a positive side benefit of this because now we can actually put Prop types for each individual and React to me that much more helpful in helping us find bugs right.

[00:06:25] Because [COUGH] let's say we tapped passed on a show but for whatever reason the show didn't get the title attached to it. Your prop types would not warn you about that right cuz it's only looking for show and if shows is there, then it just says cool, I'm done, right?

[00:06:37] But now if you don't pass down title, it's going to blow up and say hey you forgot title which is great. So I'm gonna say title React.uppercase. So, I don't know about you but I get sick of doing racked up prop types for every single thing so we can actually even just do a little shortcut up here.

[00:07:02] const. We're gonna use string. Actually they're all gonna be strings, right. Yep, they are all strings = React.PropTypes and so now we can say string description is a string and year is a string. Yes typically year would be a number but just remember like it can, it's like 2014 to 2017 or whatever.

[00:07:40] That's why that’s still a string and poster string. These are all required as well. So we can actually go after these and say .isRequired
>> Brian Holt: Save that. Any questions about that, well we just did here?
>> Speaker 6: Yes the string in curly brackets of on line 14, that's taking the attributes propTypes.

[00:08:12]
>> Brian Holt: It's the destructuring that we'll use the exact same sort of destruction that we saw before. You can also do this as well. const string = React.PropTypes.string, right. Same diff.
>> Speaker 7: So our key issue stayed the same with this change?
>> Brian Holt: Yup.
>> Speaker 7: Okay.
>> Brian Holt: So if you save, I'll let people take a look at this a sec before I address your question.

[00:08:48]
>> Brian Holt: So you must have got it. So let's go and look at search real quick, we'll also have the soft key there for the same reason. Okay, so let's refresh here.
>> Speaker 8: Is there a way. So let's say you do want to pass in one object as the props.

[00:09:10] Is there a way to specify child properties inside of that object?
>> Brian Holt: Yeah let's look at the documentation real quick react prop types.
>> Brian Holt: I believe.
>> Brian Holt: Object of. This is what you're gonna use? No, shape. That's what it is. And that's gonna look inside of it then you can just do nested shape as well.

[00:09:45] There's also array of if you're passing an array of something and you wanna validated that an array of strings that also works too. Actually, we'll use real a rail of later. There's also any. I don't see it anywhere in here. Right there, any. So if you're just going to pass down something and you don't actually really care what the type is, you can do a react.prop type.any.

[00:10:13] And that's going to say match anything that comes in here. But this will just make sure that isRequired like it's definitely gonna show up right. For the most part, you don't need to do that. You can also make your own custom prop types, read about it on your own time cuz I've never done it.

[00:10:30] It's useful not useful for me to explain to you if I've never done it. Know that it exists though should you so desire that.