All language subtitles for 009 Passing State Data Across Components_en

So that was a lot of talking about you state, but of course, as I said, it is important.

But now let's continue and let's make sure that we actually can press that button and we do at this

ingredient somewhere.

So for that in to submit handler, I want to submit my data.

Now, let's say we're managing our ingredients not in ingredient form, but in the ingredients.

Just following Folland ingredients component there.

And just because I'm seeing it here, I'm creating that component with the function keyword like this

in ingredient form, I'm creating it like this, storing it in a constant, then by using a eral function

on the right side of the const, it's totally up to you.

What you want to use both creates valid functional components.

Both has nothing to do with react hooks.

So back in the ingredients function here, which we just to avoid confusion could also write like this

in its ingredients function.

I have two ingredients for him.

And here in this functional component, I want to manage my ingredients.

I guess that makes a lot of sense because there will always later output the list of ingredients.

So it is a component that has access to both our input and to our output later.

So I want to manage the ingredients in there.

Does, of course, means that we want to add use state here, because our list of ingredients, our

array of ingredients, of course, will be some state that she'll survive rewriter cycles that will

change over time and where every change should be rendered.

This so that once we do add a list to output our ingredients, well, we can actually see some change

there when we add ingredient.

So in the ingredients functional component, I'll again use aerator structuring to manage my ingredients

and to have a set ingredients function.

And in there with you state, I start with an empty array here, I use an array because ingredients,

of course, will be a list of ingredients and we will always update that list as a whole when we add

an ingredient or when we later delete an ingredient and so on.

So we got our ingredients.

Now, we can also import the ingredient list component from the ingredient list, just file, which

I prepared for you, you can just add it here, ingredient list and ingredient list.

This component actually takes a property ingredients, which is then output.

And there besides the title and the amount, I also want to have an I.D. that IDs then used as a key.

So egregious, I want to parse ingredients, this prop, which ingredient list expects to ingredient

list and the value here will be my ingredients up there now can be confusing because it's always the

same name.

So maybe we name disappear yuzu ingredients and name this here is set user ingredients.

You don't have to rename this just because you rename debt, but to really make it clear that these

two belong together.

I like to have the same names just as a set in front of our updating function here and now.

User ingredients is what I pass here to the ingredients prop.

So I hope this is clear which ingredients is what.

That's the prop of the ingredient list.

So we're passing this in here now.

The ingredient form should be able to add a new ingredient.

So let's define a function here in the ingredients.

Functional component, add ingredient or add ingredient.

Handler, maybe, and that's a function which will ultimately receive a new ingredient here, which

should store design our ingredients array.

So here the idea will be to call set user ingredients.

And now important, we'll need to update the existing list of ingredients and add a new one.

Now, that means we depend on the current state and therefore it's best if we use the function of form

where we're guaranteed to get the latest state.

So we get our previous ingredients here, our old array, basically the current state, the most recent

state of this list here.

And we return a new era where I use all previous ingredients.

This is a spread operator taking all elements of our old array and adding them as elements to this new

era, which I'm constructing with the square brackets.

And then I add one new element here, and that's the ingredient we're getting now.

Important ingredient we're getting from the ingredient form will have a title and an amount, but probably

not an ID because the idea should be somehow auto generated.

Now I'll later use a Web server which does this for us.

For now.

Let's create a new object here with an ID, which for now can just be MAFF random to string.

And that's not truly a unique ID, but unique enough for for our cases here.

It's a good ID and then I of course want to keep my title and my amount from ingredient and we can again

use to spread operator on ingredient now.

So on this argument we're getting because this argument will be an object.

Let's say the spread operator then takes all key value Keres from that object and adds to ask value

pairs to this new object.

So now we're adding a new object with an ID tideline amount to our list of ingredients here.

That's the add ingredient handler.

Now we need to pass a pointer at that add ingredient handler to the ingredient form because that is

where we want to trigger the addition of an ingredient.

Right, because that's where we have our button that well submits this form.

This button is of type submit, therefore it triggers the ends up here and the handler and in here I

now want to well, call something which I'm getting from the ingredients component.

So let's say we pass in a prop which could be named on add ingredient and the name is totally up to

you.

And there we point at the add ingredient handler.

So this is how you parse function references down to components.

Right.

You learned that from the course.

Hasn't changed, has nothing to do with react hooke's.

So now we'll have on add ingredient prop in the ingredient for him and dad will have a pointer at this

function.

So in the ingredient form, in the supplement handler, we can call props on add ingredient as a function

because again, this will hold a pointer at that function in the ingredients, Jaspal, and there will

pass the object because here I expect to get ingredients as object.

I pass an object which has a title in amount, so your title is my entered title.

And amount is my entered amount just like that.

So this is getting sent to the.

Add ingredient handler, this will add a new ingredient and update our ingredients array, and we're

passing those ingredients array to the ingredient list.

So now our hope would be to see changes in that list when we add an ingredient.

So here's our ingredient list.

Now, let's add five apples.

And we're getting an error now, it is error is coming from the ingredient list there, I'm registering

a click on ingredients to bind to and remove item that is something we'll need later to remove ingredients.

So for now, let's simply go to the ingredient list component we're using in the ingredients component

and pass on removalist prop in there.

And this should point at a function which for now simply doesn't do anything just so that ingredient

list does receive a function and bind.

Delford does work.

So with debt, let's try this again, let's add five apples and here they are now clicking on them,

doesn't do anything for now, but we can now add our ingredients.