All language subtitles for 15. Dealing with Nested Components

Okay.

Good friends.

We have completely finished working on this component and I am pretty proud about it.

Now what I want to do is something maybe a little bit simpler.

Now what I want to do is I want to extract this right over here into its own component.

So remember, this is the name card.

So let's go over here.

And usually what you would do is, well, you would create another file in here and you can call this

name card or you can call this whatever it is that you want.

However, let's say you want to create another directory in here.

So maybe over here you want to create a card directory because you might have multiple cards in your

application.

And then right in here you can say that this is going to be the name Dot View File.

So what I'm going to do now is I'm going to go ahead and just grab this.

So this is the component that we have, and I'm going to put it inside of a template.

And then right now, just for now, let's remove all of this.

And then over here, let's just put in leaf and let's go ahead and add a little bit of style.

So I'm going to move the move some of these styles here.

So we've got we need the card.

We need the card P And I believe that's all it is that we really need.

Let's go ahead and save that.

And now what I want to do is I want to render this component.

So how are we going to do that?

So I want to render it right over here.

So you might be thinking, well, I can just say name like so because that is the name of the file.

So I'm going to go ahead and save that.

I'm going to comment this out for now.

So go ahead and save that comment this out.

And let me just go ahead and refresh and you can see that we're not rendering anything.

So why is that?

Well, that's because we actually nested this this name dot view file inside of this card directory.

So now if we want to auto import that in, what we should do is get the folder directory.

So the name of this directory and then also the name of the file.

So if you want to render that, it's going to look something like this card name.

So again, the name of the directory and then the name of the file.

So over here, we're going to go ahead and save that.

And let's go back over here.

And right away you can see that it is working.

Now, of course, you can have multiple directories, multiple nested directory.

So for example, let's add another directory.

You're just saying hello, something like that.

And then right over here, let's actually move that right in there.

I'm sort of go ahead and let's just skip the changes some move this.

So let's go ahead and add that directory again.

So I'm going to say hello.

Or where is that?

It's saying it's there.

Oh, there it is.

Okay.

So it was actually in there.

It's a little confusing for me.

Now, if you go ahead and refresh, you can see that.

Well, now it's yelling at us about this.

So over here.

Now what we're going to do is we're gonna change card.

Hello, name.

And there we go.

You can see that it is working a okay, so it's going to be this name plus this name plus this name.

And obviously I don't want this.

I'm going to move it right back, skip the changes and I am going to get rid of this hello directory

and I'm going to move this right back to card name.

Okay, so there we go.

You can see it is working fine.

Okay.

So this is looking really good.

But now what we need to do is we need to start passing in some data.

So we're going to iterate over this.

So we're going to iterate over this card name.

So we're going to have a V for in here.

And then what we're going to do is we're actually going to go ahead and just pass in the name and the

name is just going to be a string, so it's going to be a unique string.

Let's go ahead and do that now.

Over here, we need to accept it.

So inside of our script tag, I'm going to go ahead script.

Get rid of all this junk.

I'm going to say over here, script set up Lang is equal to TypeScript.

And then right over here, we're going to very similarly accept the props.

So let's go over here.

We're going to say props is going to be equal to define props.

And over here, let's define an interface for this.

So I'm going to say something.

Name props.

So name props.

And this is only going to have a string or sorry, a name that is going to be a string.

That's all it's going to have.

So let's go ahead and copy that in there.

And now, because we have defined the props right over here, we can actually have our actual name.

So you can say name like so.

So now let's go ahead and do that.

And it is not working.

So why is that not working?

We got a name here.

What I'm going to do just to double check is console that, log the props.

Let's console.log the props just to see exactly what we are getting.

So when a consul.

Go to the console here.

We're getting a proxy.

So to go ahead and refresh this search.

Okay.

Search.

I'm not sure exactly what happened before, but now it's working.

So I'm I'm almost flustered why that happened before.

But now you can see that it is working.

Okay.

I probably just needed to refresh.

So that's pretty much it.

And this lesson was really mainly about how we can deal with components that are nested in other directories.

And now you guys know exactly how that works.

So we're almost pretty much done this application.

The only thing that we need to do now is figure out exactly how we can start deleting different names

that we are not interested in.

So let's actually figure out how we can do that in the next video.