We can immediately see how the RegionsInformationTable component is rendered: it just depends on two more of the components we decided that we would create. Note that we are returning HTML code as if it were a valid JS value: this is JSX, and it provides a very simple way to intermingle JS code and HTML code. We'll have a list of countries (much reduced!) that supposedly comes from a web service, and a list of regions (also reduced, with fake data) that would come from a different service, after the user has selected a country. This data is the state of the component; whenever any of those lists changes, React will re-render the component and everything it includes. We'll look at that further in the Handling State section:

// Source file: src/components/regionsInformationTable/index.js

/* @flow */

import React from "react";

import { CountryFilterBar } from "../countryFilterBar";
import { ResultsDataTable } from "../resultsDataTable.2";

export class RegionsInformationTable extends React.PureComponent<
    {},
    {
        countries: Array<{
            code: string,
            name: string
        }>,
        regions: Array<{
            id: string,
            name: string,
            cities: number,
            pop: number
        }>
    }
> {
    state = {
        countries: [
            { code: "AR", name: "Argentine" },
            { code: "BR", name: "Brazil" },
            { code: "PY", name: "Paraguay" },
            { code: "UY", name: "Uruguay" }
        ],

        regions: []
    };

    update = (country: string) => {
        console.log(`Country ... ${country}`);

        this.setState(() => ({
            regions: [
                {
                    id: "UY/5",
                    name: "Durazno",
                    cities: 8,
                    pop: 60000
                },
                {
                    id: "UY/7",
                    name: "Florida",
                    cities: 20,
                    pop: 67000
                },
                {
                    id: "UY/9",
                    name: "Maldonado",
                    cities: 17,
                    pop: 165000
                },
                {
                    id: "UY/10",
                    name: "Montevideo",
                    cities: 1,
                    pop: 1320000
                },
                {
                    id: "UY/11",
                    name: "Paysandu",
                    cities: 16,
                    pop: 114000
                }
            ]
        }));
    }

    render() {
        return (
            <div>
                <CountryFilterBar
                    list={this.state.countries}
                    onSelect={this.update}
                />
                <ResultsDataTable results={this.state.regions} />
            </div>
        );
    }
}

This component receives no props, but works with state, so for Flow's sake, we had to write React.PureComponent<{},{countries:..., regions:...}>, providing data types for the state elements. You could also define these data types in a separate file (see https://flow.org/en/docs/types/modules/ for more on this), but we'll let it be.

What about the list of countries? The CountryFilterBar should show some countries, so the parent will provide the list as a prop; let's see how it will receive and use that list. We'll also provide a callback, onSelect, that the child component will use to inform you whenever the user selects a country. Finally, we'll pass the list of (fake, hardcoded) regions to the ResultsDataTable. 

By the way, note that our list of regions starts out empty; the results table will have to deal with that. When the user selects a country, the .update() method will run and load some regions by using the .setState() method, which we'll see in the following section. Later in this book, we'll also see how to use a web service to get that data, but for the time being, a fixed result will have to do.