Current section: Lifting The State 29 exercises
solution

Lift State

Loading solution

Transcript

00:00 All right, so let's get started. The state that we need is the query right here. Matching posts is set to query empty string because we don't have access to the query here anymore. The form is the one managing the query and that's just not enough. We need to move it up. So we're going to move this up here,

00:18 and now we can pass that query to matching posts, and we also need to pass the query to the form now. So query and set query go into the form. We don't need to bother passing set query to matching posts because it doesn't need to ever change the query. It's just the form that needs to do that.

00:35 So now we need to update the props here to accept query and a function for updating that query. So set query function, you can type that however you like. Then down here, we have this use effect that depends on this set query,

00:52 and honestly, I think it actually makes more sense to just move this up to the app. Because the state management is now happening inside of the app. So you could make it work inside of the form, but I think moving it up to the app makes plenty of sense.

01:09 So with that now, we have successfully moved things up and we are filtering down as we should. I see things as they go, dog and cat, and everything is working the way that it should. Things are getting filtered properly, even post refactor. So this is lifting state. We had two components that both needed

01:29 access to state that was stored in one of them. We took that state, moved it up, and everything for managing that, and then passed down the necessary props to the individual components and there you go, now it's working.