Original subtitles

Hey, it's Andre here, some of you might be wondering why we don't add state to search box.

I mean, it looks like what we're doing is adding the on change over here, giving it a function, and

this function goes up a level and letting our apgar's know that there was an event.

But search box, shouldn't that have the search field state?

Let's explore that.

Now, I want you to think about this.

Why wouldn't we put state here?

Pause avideo, think about it.

Let's find out what.

Remember our third point over here, a good reactive holper decide, decides what changes when state

changes.

Let's think about this.

Now, the reason we don't change the state in search box and instead we trigger whenever an event happens

to handle change up here in Ajaz is because our other component card list needs to have that information

right.

Remember, the way we filtered monsters was by using the search field state to filter based on the user

input.

So the way to think about this is like, so if we had our app over here and this is our objets, and

in here we have the search component and the card list component.

If the state was only here in the search box component, there's no way for the Kahless component to

find out about it.

Remember, because of one way dataflow data can only flow one way.

So there's no way for, let's say, the search for state to move up and down to the cardless component.

So instead, we want to place the state in a place where it gives us access to whatever needs it.

In our case, both Carlist and search box need that state, that search field state.

So we move it up.

And the way we architect things and react is that when an event happens on a component, let's say a

user clicks or type something, well, that event triggers the react event system and says, hey, something

has happened.

Create an event handler like handle input or handle change.

And it's going to go up and let the component that has that state know that, hey, something has happened.

You need to update state and how far up that goes.

Let's say we had a component underneath this.

We notify the component that has the state as far up as we need to in order to pass down that information

to the components that need that information.

Now, if you don't get this right away, don't worry.

This is something that comes with practice that we're going to explore throughout the course as we build

more and more projects.

But I want you to pay attention that you want to decide as a reactive helper what changes, what events

that the user's take, how far up it goes to let the state know.

And you want to move the state in a high enough position so that we are still able to pass down that

information to different notes, but at the same time.

If we had, let's say, a state in here that the only people that care about it is these two components.

Well, if that's the case, there's no point bringing up the state all the way up here.

You want to place the state over here because all these components don't really care about any of this.

Again, this is a topic that will cover a lot more.

And structuring state is a very big topic.

And yet but I want you to start noticing these things.

Let's keep going.