When you start the application with npm start, you get our basic screen, showing the dropbox with the countries, and no cards, as shown in the following screenshot:

Then, suppose you select a country; what will happen? Let's follow that, step by step:

1. In the CountryFilterBar, the onChange event will fire and will execute a callback (this.props.onSelect()), providing it with the selected country code.
2. In the RegionsInformationTable, the callback that was provided to the CountryFilterBar is this.update(), so that method will execute.
3. The update method will log the country (just for reference) and use this.setState (see the next section) to load some regions in the RegionsInformationTable state.
4. The change in state will cause React to re-render the component.
5. The CountryFilterBar won't need re-rendering because neither its props nor its state changed.
6. The ResultsDataTable, on the other hand, will be re-rendered because its props will change, receiving a new list of regions.

So, after all this is said and done, the new view will be as follows:

This is basically how your application will work: events are captured and handled, state is changed, props are passed, and React takes care of re-rendering whatever needs to be re-rendered.