Original subtitles

Hi there, welcome back in the annual lecture, guys, in the previous about to be created for a loop

in our template in this lecture, I will show you how we can pass data from component to component.

OK, let's start.

Let's open our code.

In another part of the view we have, here are a nice far loop and a data we are specifying, which

is brand name and menu items.

What I want to show you is how you can pass this data from different component in this case up to the

view component, because other video component is indeed responsible for displaying that number.

So I want to define its data here, and I want to pass them to exchange nav bar and is a very common

practice.

If you have a component that you are using in, let's say, multiple pages or in multiple other components,

you want to make it reusable as soon as possible, as much as possible.

So you want to not define a data in that component, but you want to pass them through the other components.

So it's going to be much more easier.

But I will show example.

For example, let's say you have some quiet component, right?

You have a card component that if you say the card and this card is displaying some data, it doesn't

specify what the data, according to data here, but there are other.

But every page now they're using this data.

It should be page.

Page one, the page.

Page two, let's say Page three.

Page two aerialist pages specifying its own data and passing it to display to the card and the card,

is this played out?

OK, so for example, Page can display the product data page rankings by the product title page two

can display some block data and so on.

But all of them, they are using the same card component and they are passing this, this props, as

you call it, to the card.

So let's say Page one passing title data, content, content and the same for a page doing.

They're passing also title and the content and the card is taking this data and displaying it out.

So that's a concept behind props, as we'll be talking now.

We don't want to display the data in our small components without defining them there, but just receive

them.

OK, you have of talking.

Let's go to North Bartlett Violet.

Let's see.

Let's get the entire data function.

Just get it like this or remove it and get it to the Abdal to view, OK, so under the comprehensive

right comma and you will pass here the data function.

Now you have a print name here and menu items here.

What do you want to do next?

You want to specify in your another component the props later you will receive.

OK, and the relationship, a relationship that they are talking about, is that up to the view component

in the relationship or to the exchange?

No exchange, heroic change list and extras.

Pagination is parent component, and all these components here are child components.

So if the sum component wrapping the other component, the relationship is a parent and the child,

so too are no child component will specify here, will specify the props or to simplify their props

like this?

Alright.

And here we'll specify the name of your product can be whatever, whatever names you will decide to

get here.

The props doesn't have to have a same name as a data you will be.

Yup, you are specifying here.

So, for example, I can specify I would like to get your title.

OK.

Like this and coma and I would like to be safe out here, I would like to get here menu items.

I can just simply call it items.

OK.

Title and items then as specified here, what type of this data will we be able to type?

And we know the title title is a strength.

OK, so specify your strength and we know that items is an area type area.

OK, now we need to do the changes, because what the template up here is trying to get here is a brand

name by the brand.

The name is no longer in the context.

Here we have the only title which will be passed through the Abdul review and we don't have menu items,

but the have only items.

So simple change.

You guys just get a brand name and change it to the title and get here.

Menu items and change them to items like this.

OK.

And now in our update, we'll.

We have a data here now, so what we need to do, we need to pass them to the north, but we will pass

them as this.

Similarly, as to the far loop, you will right here v£ OK, so you can do be bind, a specified column

and the name of the prop.

So they are calling it a prop title.

And will be passing her data.

OK, so to the data, we can pass to the title because are what our brand name, brand name like this?

OK, and then we have here RV bind, you bind and we have here items and that's our menu items.

And yeah, that's all of it to pass.

OK, so title items, that's what they are specifying the title items and in the background, what's

happening?

The brand name gets passed to the title.

Menu items gets passed to the items.

As pretty as far, look, we don't need to specify the bank that's redundant, we can just specify here

title and the items available to be pain killers, but in a background it's a v bind.

OK, let's say that you should see an able to pay a browser doesn't worry for us.

Everything is working as it was before, and that's how you are passing props around.

Let's a couple of options you can define with flare.

OK.

So for example, as I told you, many of them are using the same tags, the balance and you are specifying

directives.

The value is getting passed automatically as a variable.

If I want to pass a string value, I need to wrap it in a quotations like this, but I will save it

now.

I'm not passing the value from the branding variable, but I am passing the Arrow brand name value.

Somebody will display discipline my page.

Be the brand name.

OK.

OK, but of course, you want to pass it as the variable because they are holding this value there.

OK, what else?

What I can show is there's some options we have enough bar have, we can specify and also default value.

So for example, let's have it articulated actual it's been right there.

Something is required.

Ellen Mackey through us.

Very clear it and I will go to applaud you and I will say, OK, I'm not passing this brand name.

Okay, I'll save it now, and we'll go to browser refresh.

I don't have any brand name.

As you can see, I'll get the warrant in the console.

So an evil open console, so control out and eye or comment option and I right click and inspect.

You should see here and I console.

Macy Gray, cloud prop title, OK, they're passing on enough budget items, but they're not passing

our title.

OK, so that's very clear, but of course, of course, we could not give the required force and we'll

be in on the Escalades and be able to get any issues, but we will also display anything.

So it's false.

We're getting the morning.

But you have also shown to be have you specify her default default like this and default will be, let's

say, my default name or my default title?

OK.

And you will do it like this, then you don't need to pass here.

The title above and the title is not the default value for the title is yours, which is my default

title.

Then you will say it like this, but I go to the brave browser or any browser.

It will display my default title.

OK, so we can specify, or do you feel the value by not making the exchange or.

OK, just so you can see it.

OK.

We can still pass it.

OK, no big deal.

They can stop us.

Here are a title, but it will be our brand name, right brand brand name and the items menu items will

pass as the regular because that's very important for us to pass on the menu items.

So let's go to the bar and let's pursue five year items will be very quiet, very quiet and this will

be true value.

OK, perfect.

We will verify everything looks good here of us passing title items here, we have some complaints.

Let's see what is this complaining about.

Actually, no campaign has been registered, but not to use it, didn't remember something in they are

here.

OK.

Now, let's have it back here.

Everything is working as before, and they'll be using this concept a lot, perhaps is a very heavily

used concept in almost every framework or library as they react angular and so on.

So you'll be using it a lot.