All language subtitles for 9. Adding the Names Array

In this video.

What we're going to do is add a button right over here that is going to compute all of the different

names based on the categories and options that we have selected.

So the first thing that we want to do is we want to add that button.

So what I want you to do is I want you to go right over here to the options container.

Click on that div now.

Options not option with the S, click on that div scroll all the way down and then right over here between

this div and this div, we're going to add that button and this is going to be we'll find names like

so.

So over here you can see we have that button.

Now, let's go ahead and style this a little bit.

I'm going to give this a a class of primary, like a primary button.

So over here, let's go ahead and add some of those primary styles.

So let's go ahead and do just that.

So the first thing I'm going to do is apply a nice background color.

I'm going to say our G B and then I'm going to say two, four, nine, eight, seven, and then eight,

nine.

I'm going to say the color is going to be white.

I'm going to say the border radius is going to be around 6.5 rems.

And then what we're going to do is we're going to give this a border of none.

A padding of 0.75 rims and also for rims.

We're also going to give it a font size of one rim, a margin top.

Of, let's say, one run.

And a cursor pointer is pretty much all it is that we need.

And there we go.

How pretty is that?

So that's looking really good.

Okay, so now what do we want to do?

Well, when we click on this button, what I want to do is I want to compute all of the different names

that, you know, belonging to the categories that were selected.

So what I'm going to do just for now, instead of showing those cards, what I'm going to do is I am

going to create another piece of state, because at the end of the day, this is state, and I'm going

to call this names.

So I'm going to call this piece of state names like so.

And instead of this being reactive, I'm going to use a ref because this is just going to be a simple

array.

Some say ref and then this is going to be an array.

Now, it's actually also a good thing to define the type of the array, because right now we could have

an array of numbers, you could have an array of strings.

We could have whatever it is that we want.

And just to prove that to you, we could do names.

Dot push and we can push in a string like so or sorry we can't do that.

We say that value and then over here you can say dot, push and push in a string.

We can also do names dot value, dot portion can also push in a number and that's fine, that's okay.

However, obviously we don't want to do this.

We only want to push in a string, which is the name itself.

So we need to define a type.

Now, how do we define an array type?

Well, that's pretty easy.

So we're going to say string because we want it to be a string.

We also want it to be an array of strings.

So we say string and then just brackets specifying that this is going to be an array of strings.

So now you can see here it's yelling at us, telling us that, hey, we need to pass a string in, not

a number.

All right.

So that's looking good.

So now that we have our state, actually, maybe a better name for this is something like selected names

or you know what, we'll just keep it as names.

I think they'll say, okay, so now what we need to do is we need to start computing the names.

So what I want you to do is I want you to go to my GitHub page and I'll have the link in the description

below.

And what we're going to need to do is grab a list of all of the different names.

So I'm going to go here.

I'm going to go to my repository.

You guys do not have to do this.

I'm going to have the link in the description below.

And over here I have.

And if I go over here, over here, I have this data.

And right over here, I have this name's Dots.

Let me just zoom in here a little bit.

So name's Dots.

And right over here, we have a bunch of different names that we can utilize.

So I'm going to go ahead and copy all of these different names.

So all of these are for names or objects.

They have an ID, there's the name itself.

And then over here we I specify the the category that this belongs to.

So this name right over here, it's a girl name.

It's very trendy and it's long right over here.

This is a girl name, trendy, and it's short.

So we have a just an array of different names that we have.

So I'm going to go ahead and copy all of this.

So copy all of that.

And I'm going to create.

Right in here.

I'm going to create a data dots file.

This is where we going to store that data.

Now, right over here.

Notice that I actually already have the enemies right here.

So what I'm going to do is I'm going to grab these genomes because you see humans use the capitalization,

and I actually prefer that.

So over here we're going to say we're going to utilize those enemies.

Now, what we need to do is because we have these enemies here and they're being used here, we don't

want to, of course, duplicate them in here as well, because this is just not code duplicity.

So instead, what we're going to do here is we're going to export each one of these enemies like so,

and then we're going to import them in to this file.

So let's just go ahead and get rid of this.

Now in here, we're going to say import and then from.

And then we can say from act.

So this is going to be the root directory and slash data.

And then over here, we're going to say, I want to import gender.

I want to import popularity.

I also want to import the length.

So let's go ahead and save that.

So now we have imported the enemies.

Now the names also have a type.

I have defined the type over here.

So this is right here saying that we the names is going to be an array of this interface.

And I defined this interface right over here, which is going to have an I.D. and name.

And then over here, the gender should actually be the enemies themselves so we can say gender like

so.

And then popularity is going to be popularity.

And then length is going to be length.

There you go.

So that should be a okay.

So now what we can do is we can actually get the names as well.

So this is the data, this is the array that we're going to utilize and iterate over and eventually

figure out, you know, how we want to filter it for our specific options.

And this is going to give us an error because while we have names here and we also have names over here.

So I'm going to say here that this is going to be called some length selected names just so we don't

have that little mismatch.

Okay.

So this is looking really, really good.

So now what we're going to do is for the selected names.

For now, what I'm going to do is I'm just going to display it right in the bottom.

So right over here, right after this, I'm not just going to display these selected names.

And now if you go all the way over here, if I were to zoom in a little bit, you can see it's an empty

array.

Now, what I want to do is when I click this button, I actually want to perform the computation that

is going to populate this with a bunch of different strings.

So let's actually do that computation in the next video.