Check out a free preview of the full Intermediate React, v2 course:
The "Heterogenous Arrays & Hooks" 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 types several more components, and demonstrates how to type heterogeneous arrays, and hooks while typing the remaining components.

Get Unlimited Access Now

Transcript from the "Heterogenous Arrays & Hooks" Lesson

[00:00:00]
>> Brian: Let's go to useDropdown. So we're gonna rename useDropdown.js, rename that to be dot tsx. It thinks it's happy, now it's upset. Okay, great.
>> Brian: So we need to update or get a couple more things from this. We need this to import set state action and dispatch.
>> Brian: Okay, what is label?

[00:00:37] Label is a,
>> Brian: String. I pasted the wrong thing in my notes so,
>> Brian: DefaultState is going to be an any.
>> Brian: And options is going to be a array of strings.
>> Brian: So drop down in and of itself is a function component.
>> Brian: So it will grab that from React as well.

[00:01:22]
>> Brian: And then, does it know updateState is? Yeah, that's a dispatch and dropdown, and state. So we could even go as far and say,
>> Brian: Let's see, state.
>> Brian: State.
>> Brian: Yeah.
>> Brian: So in this case, we don't actually know what states gonna be, actually we do, don't we?

[00:01:55] State is always going to be a string.
>> Brian: That's true. So make this a string.
>> Brian: Because you're dealing with a select, right? And that select is always going to be dealing with strings. So you can just go ahead and force everyone to give you strings.
>> Brian: Okay, and then I guess we didn't actually need these ones, so you can go ahead and delete those.

[00:02:22] SetStateAction and Dispatch, okay.
>> Brian: Cool, any questions about useDropdown? It was pretty straightforward. You just have to identify the parameters and everything else kinda fell into place. And then, we just kind of refined useDropdown a little bit to make sure this is definitely a function component and not just generic JSX.

[00:02:46] Nothing you've really have to distinguish that very often, but might as well.
>> Brian: I got like ten more minutes now, eight more minutes to finish it, okay?
>> Brian: So let's go finish search params now.
>> Brian: We renamed that to .tsx. We need to tell that this is a FunctionComponent, so let's go grab that.

[00:03:22] Results can be upset at, because we haven't defined results yet. And we're also need to get import RouteCmponentProps from reach/Router. Okay, we'll move that up there.
>> Brian: And then, we also need animal from the master/pet. So animal, like that. So search params is a function component.
>> Brian: And it takes its components, a route component props, It itself is not expecting any sort of ID or anything coming from Reach Router.

[00:04:16] It doesn't have any wildcards or variables in its URL. So we don't have to give this one any sort of parameters, whereas we did before, right?
>> Brian: Then, the one that we have to do here is useDropdown, "Animal", ANIMALS. The one that I'm looking for is,
>> Brian: This is another one of this where the pets becomes a never, right?

[00:04:48] It gives us an array but it won't let us touch it, so you have to tell it here. This is an array, but this is eventually going to be an array of animal, that are coming back from the API.
>> Brian: And same with thing with breeds. This is going to be as string array.

[00:05:11]
>> Brian: Type, location string, breed string, or dispatch, right? So this is what we needed to change about us drop down. So here's the issue, we're giving back Breed and it's sees each one of these and is like I don't know if this is always gonna come in the same order.

[00:05:32] So I'm just gonna assume that it comes always out of order. We know this isn't the case. If we go back to use dropdown that state dropdown and state update, state always comes back in this order. So we actually have to be more specific than we were previously, despite the fact that useDropdown was happy before.

[00:05:49] What's being used is unhappy and the problem is not there it's actually in the useDropdown. So here we have to give it back, it's like no this is very much gonna be string FunctionComponent. It's actually gonna be a ReactComponentElement.
>> Brian: Nope, it's a,
>> Brian: Let's just go FunctionComponent, cuz that's technically what it is.

[00:06:18] And then this is gonna be a SetStateAction.
>> Brian: And this is gonna take in a string.
>> Brian: And let's go see if that fixed our problem. Okay, it did. So let's go ahead and just chit chat for a second about what happened here. This was actually probably a really good problem for you to ,because I think I've rewritten this like three times and I run into it every single time that I forget that I need to do this.

[00:06:53]
>> Brian: So when you give Typescript an array, and it's a mixed array, right, or a heterogenous array. It's going to assume that all the elements can come in any order, right? So I gave it here a string, an element, and a function. I assume that this can come back to me in any order.

[00:07:12] So I had to go back and say, nope. It's very much this, this, this, and never anything else, right? So now if I go back to Pet it's gonna look at, or not Pet, we were in SearchParams rather. It knows that's gonna be a string, I know that.

[00:07:30] So it's okay. Does that makes sense?
>> Brian: So let's go do results.
>> Brian: Rename this to be Results.tsx.
>> Brian: So we need to grab FunctionComponent from up here, FunctionComponent. And we need to grab Import Animal from @frontendmasters/pet, okay? We're gonna say this takes an interface of IProps being pets: Animal array.

[00:08:26] And then results here is a FunctionComponent with IProps.
>> Brian: And I think that's it. I think now results should be happy.
>> Brian: And those pets is an animal array now. And now if we go back to SearchParams, I think this should be happy too now. Where's my error?

[00:08:55] UpdateBreed, this wasn't happy. What's wrong with this? New state strings forward, okay. So rather than do that, we're gonna come back here and say this is actually gonna be the SetStateAction. I thought that's what that was.
>> Brian: Dispatch, maybe?
>> Brian: Let's try that.
>> Brian: And,
>> Brian: Okay, it seems happy with that.

[00:09:35] Okay.
>> Brian: So to recap what happened there, I gave it the wrong type. So I was looking at what I was calling updateBreeds later, I was like I don't understand what this is, right? So instead what I did is, I went and grabbed a different type from React called Dispatch, and that one it was happy with.