So what's the state of play now? The state of search text and advanced live in the filterable courses table, the values of search text and advanced are updated in the search bar component. The search bar component receives these values as props and props are immutable. React only supports unidirectional data flow from the top of the component tree to the bottom. It appears we have a massive problem here. How do I get data from the search bar component back to the filterable courses table component to update its state? The answer is not as complicated as you might think. 

Thinking about it logically, we pass values as props from parent to child components. We saw when we investigated prop types, that functions can be props too. Herein lies the solution we need. We can pass a change handling function that updates the state in the parent, as a prop to child components. Passing a function as a prop means that it is executed in the component it is declared in. We can just call it from somewhere else and in this case, that somewhere is the search bar component. 

As we call it from the search bar component, we have access to the values in it including rather conveniently for us, any events that are raised. There's the values from the form can seemingly flow back up the tree. You can see that a handle change function has been added to the filterable courses table and this is passed to the search bar as a prop. 

The function expects to receive an event, works out which input fired it, which is easy in our cases we only have two and they are different types and sets the state accordingly using the values supplied with the event. The search bar receives this function as a prop and uses the handle change function as part of the unchanged event handling, passing in the event. The rest of the execution is done in the parent. 

If you look at the component tab in the developer tools, you can see the changes happen. The state is updated as we type in the text box and as we click in the check box, this also changes. The search bar receives this new state as props. And obviously the courses table receives that as well to help it filter. Although we've used this technique for form data, it can be done for any data in the application. It doesn't necessarily need to come from a user event. If you go on to look at state management, there is some hooks and techniques that can make this easier in large applications.