Maximilian: Now, that's it for this section.
In the last section, we again implemented two way binding
as part of the assignment.
Actually it was a bonus section
of the assignment I would say,
but again, we added two way binding
and we did something which has an official term in React
which I don't wanna hide from you.
We created a controlled component
and it's not the first time we did that.
Basically, whenever you use two way binding
you are controlling a component
but here we're controlling our own custom component.
Now, what does this mean?
It means that a value which is used in the component
like the value selected in the dropdown
is passed on to a parent component, through props
and is received from the parent component.
Both the currently set value,
as well as the function which in the end
handles the selected value is not part of expenses filter.
Expenses filter is really just a component
that presents DUI, that presents the dropdown
and then attaches a couple of listeners or props,
but the real logic recites in the parent component
and that turns ExpensesFilter
into something which is called a controlled component.
Now, technically there is no difference.
ExpensesFilter is still a regular component
as you learned it.
It's just a special term that when you see it
basically means what I just explained
that both the value, as well as changes to the value
are not handled in the component itself
but in a parent component.
This component controls the expenses filter component.
And that's just a term which you should be aware of.
Another term or another concept you should be aware of
because you might hear it from time to time
is about presentational verses stateful components
or stateless versus stateful components
or dumb versus smart components.
There are a lot of terms for that, but what do they mean?
It simply means that in basically all
React apps which you're building,
you will have a couple of components that manage some state
like this expenses component
which manages this filter state
or the expense form component which manages the input state.
And then you will have other components
which don't manage any state, like expense item
if we remove the button, which we should do
because it was just there for demo purposes.
If we remove it, we can also remove the useState call
and we should remove it.
We can also remove that and that and if we do all of that,
and we set this here back to props title,
then this is a state less component as it should be.
This component is a state less component
also called presentational or dumb component
because it doesn't have any internal state
it's just there to output some data.
And in most react applications,
you will have more presentational and dumb components
than smart or stateful components.
So even though dumb might sound negative
and it might sound like stateful components are better,
that's not the case.
These are really just terms
and typically you end up with less state full components
than with state less components.
Because you wanna split up your application
into small reusable pieces
and most pieces, most components
indeed will only focus on outputting something,
on having some JSX code,
maybe some transformation logic like this here
and maybe some CSS code,
but it's only a couple of components
which typically do manage state.
And then this state is spread out
and distributed through props in the end,
like here in the expenses component
where we managed to filter state
and then we pass the filtered year.
So this state value through props, back to expenses filter.
This is a standard pattern which you'll see a lot
that you manage state and a couple of components,
and then you might pass that around to other components.
And that's basically it for this module.
What you learned here again, was super important.
So make sure it's clear to you,
make sure you understand what state is
and how you can handle events and how you can pass data
from a child to a parent component.
And with all of that,
combined with the core section before
we are recovered components in general,
we're now prepared to dive into the next core section
and basically conclude the hard core of React basics.
But the next section again will be super important
because it will be about Lists and Conditional Content.