Original subtitles

In the last lecture,

we learned about a very important concept of moving data

from a child to a parent component by utilizing props

to receive a function from the parent component

which we call in the child component.

And this is closely related to another,

a key concept which we also already used

without even knowing.

And that's a concept called Lifting State Up.

Now what is that about?

Consider this basic Component Tree

which is roughly what we have in this demo application

where we have an app component

which in turn renders and expenses

and a new expense component.

Now, in this case,

the new expense component is a component

which generates some data, some state.

In our example application,

we are fetching some user input here.

Now it is quite common that you do generate

or fetch data in a component

but that you might not need that data in that component.

Instead, we need it in another component,

in the expenses component.

That's where this generated data is needed in the end,

slightly transformed, packed into an object

but it is the data we fetch in new expense.

So naturally we would like to hand that data over

but that doesn't work like this

because we have no direct connection

between two sibling components.

Instead, as you learned by now,

we can only communicate from parent to child

and from child to parent.

That's why in such cases like we have it here,

we utilize the closest component,

the closest parent component which has direct

or indirect access to both involved components

in this case, the app component.

The app component in our application has access

to both the new expense and the expenses component

because it renders both components in its returned JSX code,

that's why we wanna utilize that.

Because we can now store our state

in that closest involved component.

So in that parent component which has access

to both involved components by lifting our state up.

So by passing our generated state data from the new expense

to the app component.

And that's what we're already doing

in this demo application.

We're doing this by utilizing props,

by calling the function we receive on the onAddExpense prop.

That alone is not lifting the state up.

That's just calling a function

we receive through props.

But then we do something important.

We actually do pass data to that function

which we call here.

We pass the expense data to function we receive

on the onAddExpense prop.

So we're passing data to that function,

and by doing that we're lifting that data,

that state up.

We're not keeping it in the new expense component.

We're not keeping expense data there,

instead, we are lifting it up to the app component

so that in there we can use it like an AddExpenseHandler

where at the moment we are logging it to the console.

Now we're not yet managing that data as state here,

instead, we're just logging it to a console.

But in the next course section,

we are going to manage this whole array here as state.

And we are going to add the expense to that array.

And we are already passing down that array

to the expenses component because that's the other part

of this Lifting the State Up concept.

We are Lifting the State Up.

We are passing data up to some parent component

because we either need that data directly

in the app component

or as it's the case in our demo application.

And as it is quite common,

because we then wanna pass that data down

to another component via props.

That's what we did in the last course lecture.

And that is an important concept.

You will hear the term Lifting the State Up

quite a bit when you were working

with React also later in the course.

And whenever you hear that,

it is about moving data from a child component

to some parent component to either use it there

or to then pass it down to some other child component.

And as a side note,

this does not just work if you have the app component

which interacts with two direct child components.

Instead in this example already,

the new expense component is actually not the component

which generates the data which we're passing up.

Instead it's the ExpenseForm component

which generates that data.

It's that component which works with state

and which fetches user input and stores user input.

And that component then passes up that fetched data

to the new expense component.

So here we are already Lifting State Up

and then we're lifting it up even further

to the app component since it's the app component

which is then the first component in line

which does not just have access to the new expense

and ExpenseForm component but also

to the expenses component.

And since the expenses component is the component

where we need the data in the end,

it is the app component where we wanna lift our state up to.

Now, as you will see throughout this course,

it's not always that root app component

to which you wanna lift your state up.

Instead, the goal is to lift it up just as high as necessary

in your Component Tree until you have a component

which has both access to the components

that generate data as well as the components

that needs data,

that might be the app component,

but that could also be another component.

Again, you are going to see those quite frequently

throughout this course.