Modern JavaScript Web Development Cookbook

Modifying the region table

Since most of the new behavior will occur in the country drop-down component, we can make do with a very simple table:

// Source file: src/regionsApp/regionsTable.component.js/* @flow */import React from "react";import PropTypes from "prop-types";import "../general.css";export class RegionsTable extends React.PureComponent<{    list: Array<{        regionCode: string,        regionName: string    }>}> {    static propTypes = {        list: PropTypes.arrayOf(PropTypes.object).isRequired    };    static defaultProps = {        list: []    };    render() {        if (this.props.list.length === 0) {            return <div className="bordered">No regions.</div>;        } else {            const ordered = [...this.props.list].sort(                (a, b) => (a.regionName < b.regionName ? -1 : 1)            );            return ( <div className="bordered"> ...