Pass data from two independent component in reactjs

Question

I have a parent div that has all the components for my app.

In Searchbar,i have two components. search input and filter. When the user enters in the search box, or checks the checkbox, i need to update the data required to populate the , then do a service call passing this data. Now, my questions are:

1. Where do i need to create the data object that is required for the service call?

2. How do i update the particular object created so that when the user enters something in the search input or checks/unchecks the checkbox, the object needs to be updated accordingly and the service call is triggered?

The object looks something like this:

{ "term": "USER ENTERED SEARCH TERM", "filters": [ { "name" : "FILTER1", "values" : ["CHECKBOX1",.....] }, { "name" : "FILTER2", "values" : ["CHECKBOX2".....] } ] }

Answer 1

1. Keep the state in the SearchBar. In there, keep state for each checkbox and state for the search box.

2. From the SearchBar, give callback functions as props to the search box component and to the checkbox components. So that when the search box value is changed (use the onchange event), you will trigger the callback, which will then initiate the service call, and then update the state.