Almost ready demo

chapter06/.eslintrc

@@ -5,6 +5,7 @@
         "sourceType": "module"
     },
     "env": {
+        "browser": true,
         "es6": true,
         "jest": true
     },

chapter06/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "printWidth": 75
+}

chapter06/package.json

@@ -42,9 +42,5 @@
                         "html",
                         "json"
                 ]
-    },
-    "prettier": {
-        "tabWidth": 4,
-        "printWidth": 75
         }
 }

chapter06/src/countryFilterBar/index.js

@@ -1,7 +1,28 @@
 import React from "react";
-
+import PropTypes from "prop-types";
 export class CountryFilterBar extends React.PureComponent {
+    static propTypes = {
+        list: PropTypes.arrayOf(PropTypes.object).isRequired,
+        onSelect: PropTypes.func.isRequired
+    };
+
+    onSelect(e) {
+        this.props.onSelect(e.target.value);
+    }
+
     render() {
-        return <div style={{ border: "solid" }}>SOMETHING</div>;
+        return (
+            <div>
+                Country:&nbsp;
+                <select onChange={this.onSelect.bind(this)}>
+                    <option value="">Select a country:</option>
+                    {this.props.list.map(x => (
+                        <option key={x.code} value={x.code}>
+                            {x.name}
+                        </option>
+                    ))}
+                </select>
+            </div>
+        );
     }
 }

chapter06/src/regionsInformationTable/index.js

@@ -4,11 +4,36 @@ import { CountryFilterBar } from "../countryFilterBar";
 import { ResultsDataTable } from "../resultsDataTable";
 
 export class RegionsInformationTable extends React.PureComponent {
+    state = {
+        countries: [
+            { code: "AR", name: "Argentine" },
+            { code: "BR", name: "Brazil" },
+            { code: "PY", name: "Paraguay" },
+            { code: "UY", name: "Uruguay" }
+        ],
+
+        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 }
+        ]
+    };
+
+    update(country: string) {
+        // get a new list of regions when the country changes
+        console.log(`Country ... ${country}`);
+    }
+
     render() {
         return (
-            <div style={{ border: "solid" }}>
+            <div>
-                <CountryFilterBar />
+                <CountryFilterBar
-                <ResultsDataTable />
+                    list={this.state.countries}
+                    onSelect={this.update.bind(this)}
+                />
+                <ResultsDataTable results={this.state.regions} />
             </div>
         );
     }

chapter06/src/resultsDataTable/index.js

@@ -1,7 +1,26 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export class ResultsDataTable extends React.PureComponent {
+    static propTypes = {
+        results: PropTypes.arrayOf(PropTypes.object).isRequired
+    };
+
     render() {
-        return <div style={{ border: "solid" }}>RESULTS</div>;
+        if (this.props.results.length === 0) {
+            return "No regions can be shown.";
+        } else {
+            return (
+                <div>
+                    {this.props.results.map(x => (
+                        <div key={x.id}>
+                            {x.name}
+                            {x.cities}
+                            {x.pop}
+                        </div>
+                    ))}
+                </div>
+            );
+        }
     }
 }