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:
Our basic application, showing fixed, non-varying cards
Then, suppose you select a country; what will happen? Let's follow that, step by step:
- In the CountryFilterBar, the onChange event will fire and will execute a callback (this.props.onSelect()), providing it with the selected country code.
- In the RegionsInformationTable, the callback that was provided to the CountryFilterBar is this.update(), so that method will execute.
- 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.
- The change in state will cause React to re-render the component.
- The CountryFilterBar won't need re-rendering because neither its props nor its state changed.
- 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:
The updated view, after React handles all the necessary re-rendering
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.