Intermediate React, v2

Intermediate React, v2 Props & State Interfaces


This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React, v2 course:
The "Props & State Interfaces" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian implements interfaces into components to handle props and state, and types a FunctionComponent.

Get Unlimited Access Now

Transcript from the "Props & State Interfaces" Lesson

>> Brian Holt: So, let's go do carousel.
>> Brian Holt: Rename, carousel.tsx.
>> Brian Holt: So let's go start going through this. We're going to also import Photo from @frontendmasters/pet. This is a public state, public getDerivedStateFromProps, media. All right, let's go ahead and do an interface. We haven't done any interfaces yet, so we're gonna say, interface IProps and we're gonna tell it what kind of properties they can expect to get.

[00:00:45] So we're gonna say media is a photo array. And we're also gonna do IState just to show you how to do this with state as well. So interface, IState. Now you might be asking why are you putting capital I. It's just a,
>> Brian Holt: What do say?
>> Speaker 2: Convention.

>> Brian Holt: Convention, thank you. I'm just blanking on that word. It's a convention that lets you know that this is an interface, right? It's actually one that tslint will force you to do. You can turn that off obviously if you don't like it. But it is useful so that you can, cuz I wouldn't call this IProps any other time, right?

[00:01:26] So that capital just means interface. Okay, active is a number and photos is a string array.
>> Brian Holt: Okay, and then I just come in here and say this is IProps and IState. Now honestly, we could have skipped IState, because it knows from here that this is, that's what that is, right?

[00:01:52] But for example, if I put in something else. It's gonna say, hey, you don't have something else in there, so.
>> Brian Holt: It'll keep you honest, okay.
>> Brian Holt: Public, public, put public on these two, as well, on 27 and 32.
>> Brian Holt: And getDerivedStateFromProps. So this one you have to tell what this is.

[00:02:31] and this is IProps, right? You do have to tell it that these are IProps.
>> Brian Holt: Okay, I have to tell it what kind of event this is. So this is a React.MouseEvent that takes in an HTML element.
>> Brian Holt: Okay.
>> Brian Holt: Now, what I was gonna say is, I don't know if this is necessarily gonna be an HTMLElement.

[00:03:14] What if it's not? And it just has an existential crisis, like what is an HTMLElement? I'm just kidding, it's not true. But you do have to make sure that it is an HTMLElement. So if we go ahead and say if is not an instanceof HTMLElement, then panic, right?

[00:03:37] Or just return, I'm kidding. Yeah, sorry, you have to wrap this in parentheses.
>> Brian Holt: Okay, so that takes care of, okay, if we get down here, this is definitely an HTMLElement. But the next thing it's gonna say is, hey, this could be undefined. Like what happens if they didn't put an index there?

[00:04:02] They're like, what do we do then? So you have to be a little bit more defensive than that. You have to say if (,
>> Brian Holt: And then put that inside of parentheses.
>> Brian Holt: And then that'll work. Except what happens if that's zero?
>> Brian Holt: Nope, it'll be a string.

[00:04:38] So it'll be okay. So,
>> Brian Holt: Now everything's happy, right? Because we've made sure that it is an HTMLElement, and we made sure that index exists.
>> Brian Holt: So this is one of the frustrating parts about TypeScript to some people, is that you get into some pretty defensive programming in places where you probably don't need to be so defensive, right?

[00:05:04] This was always gonna happen, right? This was always gonna be true. But on the flip side of it, now we're guaranteed that this is always gonna be true. It literally cannot cause an error right here. And you can imagine maybe later, either you or one of your engineers that you work with comes back and modifies things later, and doesn't put index in some of the things and then they cause errors, right?

[00:05:23] So you're also kind of future proofing it. So despite the fact that it always works now, it may not always work later.
>> Brian Holt: Makes sense? All right, so it looks like it's good and happy with carousel now. That wasn't too bad either. We can also get rid of that eslint disabled line, whoops.

[00:05:44] Not that you have to, but that's good. Lets go do pet.tsx. pet.js, we name it to pet.tsx.
>> Brian Holt: So let's import a function component up here. Function component, and we'll important a photo as well. Import photo from frontendmasters/pet.
>> Brian Holt: First thing we'll tell it is Pet is a FunctionComponent.

>> Brian Holt: It's like, okay, now I know what props are, that's good.
>> Brian Holt: And now we need to tell it what kind of props it's gonna get. So we're gonna say, hey, interface IProps.
>> Brian Holt: Name is a string,
>> Brian Holt: Animal's a string.
>> Brian Holt: Breed is a string.
>> Brian Holt: Media is a photo array.

>> Brian Holt: Location is a string.
>> Brian Holt: And id is a string, right? Or is it a number? It's a number.
>> Brian Holt: And then here, we just have to tell FunctionComponent, and we'll pass that in IProps, like that.
>> Brian Holt: And now, that's happy. We didn't have to do anything else.

[00:07:27] We just had it as this is a function component, take some of these props, so you're welcome to do that that way. Now, I'll see a lot of people do it this way as well. That you can just put that directly in there and lots of people do it that way as well.

[00:07:43] If that looks better to you if it feels better to you, go for it. I just typically I've seen it done this way and then I got in the habit of doing it this way. And so now I do it this way.