All language subtitles for 13. Passing Props to the Components

So now that we have created this component, let's start passing in the necessary data via props.

So we need to just pass in pretty much everything that we have here, which is actually stored in this

option object.

So very simply, in order to do this, we can just say colon option is equal to option like so.

So that's going to be the first thing that we're going to pass in.

And that's pretty much going to deal with the the title as well as the button values as well as the

category.

Now we also need the options state.

Well, this is relatively easily can be easily done as well.

All we can do here is just say options and then this can be options like so, which is going to correspond

to our option state over here.

So that is actually all that is that we need to pass in to our component.

But now what we need to do is accept those props and then utilize them inside of our template.

So over here, I'm going to go ahead and just write a script tag.

Let's get rid of all of this stuff.

We're going to say script set up.

We're also going to say that the language is going to be TypeScript, of course.

So now what I'm going to do is I am going to get access to these props.

Now, with scripts set up, we have this thing called defined props that we can auto import.

And then right over here, we invoke it.

And then inside of an object, we typically describe the type of the props.

So over here, we're expecting an option, and that's going to be an object.

And then over here, we can also say options.

And that's also going to be an object like so.

So just as a quick clarification, the option is going to be just one of these objects in this array.

So could be this.

And then the options object is going to be all of these right over here.

So our state so is going to be an object and it's going to be an object.

However, the issue with this that I find is that, you know, this is very, very generic and it's

not really going to give us a lot of good typing.

So because we're using TypeScript, we actually don't necessarily have to do it this way.

Instead, what we can do is we can actually utilize an interface to define the types of our props.

So over here I can say something like Interface and I can say option props.

And then over here I can say option, and I can say over here that this option key is also going to

be an object.

It's going to have a title.

The title is going to be a string.

Over here, it's also going to have a category.

The category is going to be a string and then it's going to have a set of buttons.

And this is going to be an array either.

And so it's going to be an array with either all gender items or popularity items or all length items.

So over here, what we can actually do is we can say gender and we can actually auto import that in.

So over here you can auto import um imports gender from data.

We can say that this is going to be either an array of gender enum values or let's go ahead over here

and grab popularity.

And it's also grab length.

So over here we can say or it's going to be an array of popularity enum values or is going to be an

array of length enum values.

So that's just one thing that we can do to specify they could be either one or the other.

Now, over here, let's also define what the options is going to look like.

So the options is going to look like we're going to have a key that is going to be gender.

This is going to be a value of gender.

We're also going to have popularity that's going to have a value of popularity and then length that's

going to have the value of length.

And now, instead of defining it like we did before, we can just use those curly or these triangle

brackets.

Right over here.

Right in there.

We can define our props.

So now what we can do if we do props, Dot, you can see that it knows exactly what is going to be in

there and it knows exactly what that type is.

So that's just another and I think a better way of defining our props.

Okay.

So this is looking really good.

So now let's actually utilize those props inside of our template.

So the first thing that I want to do here is I want to get rid and actually, let's just go ahead and

comment out the buttons for now.

Just so we can see our progress, I'm going to comment them out.

And then right over here, I'm going to go ahead and save this and refresh.

And now you see here that we have three choose your genders.

Why do we have that?

Because we're iterating over this array.

So this array has three elements or we have three different iterations, and we're rendering this options

component three different times.

And right now, inside of the options component, we basically just have an each one with this hardcoded

text.

So you can see that this works.

But now what do you actually want to do instead is I want to access the props dot title now inside of

the template.

We actually don't have to say props dot option, dot title.

Instead, what we can very simply use is just the object, the key inside of the prop itself.

So what I mean by that is we don't have to do props dot option, dot title.

Instead, we can actually forgo the props itself and just say option dot title.

Now, if we did that, you can very quickly see we have choose your gender, choose your popularity.

Let me zoom in here once more and choose your name length so it's working.

A Okay.

Now let's go ahead and start rendering some of these buttons.

Now, the buttons are going to be a little bit more complicated.

And I'll show you why in a bit.

But really here, what we want to do is we just want to iterate.

We just don't have one button as we want to render a button for every single element that we have in

this array.

So let's go ahead over here.

What we're going to do is we're going to add a V force.

We're going to say V four is equal to.

And then over here, what we're going to do is we're going to grab the value because this is going to

be either a gender dot, a boy, gender adult, whatever.

I'm going to call that the value I'm going to say in option dot button.

So what we call that here, option dot buttons.

And then, of course, we need to give it a key.

And over here, the key could be value because that is going to be unique.

Okay.

So we're going to do this iteration and then what we're going to do for the text is we're going to render

the value itself.

So remember, the value is indeed going to be an enum, but it actually corresponds to a text if you

want to render it.

And then it's going to correspond to the text that we want, which is girl, boy or unisex.

So we're going to render that value in here.

And then right over here, what we're going to do is we're going to utilize the options from our props.

That's okay.

And over here, what we're going to do is instead of hard coding gender, dot boy, we're going to say

if that's equal to the value.

And over here, we're going to say that that is also going to be equal to the value.

And then over here, this could be popularity, this could be gender, this could be length.

So over here, what we're going to say is that this is going to be option dot category like.

So.

So option dot category.

And there you go.

I think that should be it and everything should be working the way that we expected to.

Go ahead and save that now.

There we go.

You can see that it is working.

Now, the problem is and you probably can guess what the problem is here now is that the styling is

scoped to the app dot view file and that's where our styles currently live.

So what we need to do is now just create another stylesheet that is going to be scoped.

What we need to do is just grab all of these options, all of these classes, so the options container

can stay in here.

But almost everything else with the option container, the option button's the option active all that.

We can just pretty much cut it out, save it here and then paste it right in there.

So there we go.

So now it's looking a okay, so let's actually go and give this a quick test.

And now, of course, you can see right away we have this one huge issue when it comes to this styling.

We'll fix that later.

But let's just check of this work.

So if I click on this, this should change this state in the output view and it does.

So that is looking good.

Let's just pick by unique log and we click on that.

We get this.

Okay.

I'm assuming this is right, Harrison, and maybe Harrison is not that unique, but whatever this name

is, this is definitely unique.

Now, I'm going to try to pronounce it just for you guys.

I suck at pronouncing names Bar Thor or me.

Okay, I give up.

But you can see here where it is working A-OK.

But right now, we're getting a huge problem when it comes to the styling, because right now what we're

doing actually is we're a hardcoded the option left.

So what we need to do is we actually need to figure out a way to exactly compute what the class should

be.

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