Original subtitles

In this video.

What we're going to do is actually compute the names based on the option state that we have.

So what I want to do is right over here, when we click this button, I'm going to add a click handle

event handler.

And when I call this or when I click this button, what I want to do is I want to call a function called

compute selected names like so.

So let's go all the way right over here and let's actually define that function.

So most say Konst compute selected names.

This is going to be a regular arrow function.

So now what we want to do here in this function is figure out all of the names that belong to the category

that our state is currently in.

So what I'm going to do is I'm going to say Konst filtered names and I'm going to say that this is going

to be equal to the names array that we have over here.

And then I'm going to say dot filter.

So I want to filter this array.

So the first filter is going to be filter by the gender.

So right over here, let's define a callback that's going to grab every single name.

And then, well, what I want to do is I want to check the name Dot Gender.

So I want to see what that name Dot gender is.

Remember, each name has each gender and I only want to return it if the name does gender triple equals

what we have the options dot gender.

So right now we have all of the options being girls.

So we're only going to return all of the girls at that point and it's going to return to us and array.

So just go ahead and save that for now.

Now, because this is going to return to us an array we can actually apply in another dot filter and

do the exact same thing with popularity.

So over here, let's go ahead and do that.

So we're going to grab the name and then what we're going to do is we're going to say Name Dot and this

time popularity.

We want to check that the options is going to be options dot popularity like.

So there we go.

And this is going to now return us all of the different all of the different names that belong to this

group right over here.

So girl as well as trendy.

Now, the last thing that we want to do is we'll get the length.

The length is going to be a little bit more complicated because if we supply all, we just want to get

all of the names that are still there, regardless if they're short or long.

So now what we're going to do is just apply another dot filter.

Let's have a callback function like.

So this time we're going to use curly braces because we're going to have multiple lines here.

So what I'm going to say is if.

Options.

So if the option dot length triple equals.

Length.

Thought all.

Then what we're going to do is just very simply just return true.

Because at the end of the day, what this is returning is a boolean value.

So each time we iterate through a particular name, we are either returning true or false on whether

we want to have that into the new filtered array.

So if it's all, then we just want to return.

True.

Doesn't matter if they're short or long else else.

Then what we want to do is we want to return name dot length.

We're going to say here that this is equal to options thought length.

Now, if this doesn't make sense to you, this filter callback and what we're doing, I highly suggest

maybe watching a video or reading some documentation.

I do expect you to know this if you are trying to learn, Nuck.

So this is just kind of vanilla JavaScript that you should probably know as a prerequisite.

Okay, so what this is going to do is send a give us give us all of the names, and then what we want

to do is now assign this state to the filtered names.

So over here I'm going to say selected names.

Dot value is equal to.

I'm going to call this filtered names.

I'm going to say filtered names now, right away.

This is the power of TypeScript.

Right over here, we define it.

This is going to be an array of strings.

However, if I hover over this well now this is actually an array of names, not an array of strings.

So this could have been an innocent mistake that we have definitely would have done.

But with TypeScript, we were able to catch it.

So now what I can do is I can actually do a dot map so I can iterate over this and return another array.

And over here, I can just very simply just say I want to return the name, dot name right over here.

Some say name dot name like so.

And that's just going to give us an array of strings.

Okay.

So let's actually go ahead and give this a quick test.

Some might say, boy, I'm going to say short and I'm going to say unique.

Let's go ahead and do this.

And now you can see we get Laith Lamelo, Selma and Asher.

And if I actually went over here.

So La Melo is short and unique.

And as a boy, we get.

What else would we have?

We had Laith somewhere in there.

Right here.

Uh, we got Asher.

Boy unique shorts.

And what was the last one?

Selma.

Wherever that is.

Right here.

Okay.

Now, we can, of course, do the same thing for something else now.

So we can go say girl trendy.

All right.

Olivia.

Brooklyn.

Zoe.

Valentina.

I know.

I'm sure you've seen Maya.

Ivy.

Whatever.

So this is good.

So you can see that this is actually working the way that we expected.

But now what I want to do is I want to iterate over this array and render cards.

Obviously, I don't want to render an array.

This isn't a very nice user experience.

I actually want to render cards.

So let's go ahead and do that in the next video.