map.js

import React, { Component } from "react";
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
  Markers,
  Marker
} from "react-simple-maps";
import ReactTooltip from "react-tooltip";

const wrapperStyles = {
  width: "100%",
  maxWidth: 980,
  margin: "0 auto"
};

const include = [
  "FRA",
  "DEU",
  "ITA",
  "GBR",
  "ESP",
  "GRC",
  "POL",
  "MLT",
  "NLD",
  "PRT",
  "HRV",
  "SWE",
  "AUT",
  "BEL",
  "CZE",
  "FIN",
  "DNK",
  "HUN",
  "ROU",
  "LUX",
  "CYP",
  "BGR",
  "IRL",
  "SVN",
  "LTU",
  "EST",
  "LVA",
  "SVK"
];

// 1. add state
// 2. update state with country on click
// 3. show a new component with the new country

class ExcludeIncludeGeographies extends Component {
  constructor(props) {
    super(props);
    this.handleGeographyClick = this.handleGeographyClick.bind(this);
    this.state = {
      selectedCountryId: null
    };
  }

  componentDidMount() {
    setTimeout(() => {
      ReactTooltip.rebuild();
    }, 100);
  }

  handleGeographyClick(g) {
    console.log(this.state);
    this.setState({ selectedCountryId: g.id });
  }

  render() {
    return (
      <div style={wrapperStyles}>
        <ComposableMap
          projectionConfig={{ scale: 1200 }}
          width={1400}
          height={1400}
          style={{
            width: "100%",
            height: "auto"
          }}
        >
          <ZoomableGroup center={[10, 45]} disablePanning>
            <Geographies geography="/world-50m.json">
              {(geographies, projection) =>
                geographies.map(
                  (geography, i) =>
                    include.indexOf(geography.id) !== -1 && (
                      <Geography
                        data-tip={geography.properties.name}
                        onClick={this.handleGeographyClick}
                        key={i}
                        geography={geography}
                        projection={projection}
                        style={{
                          default: {
                            fill: "#ECEFF1",
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          },
                          hover: {
                            fill: "#CFD8DC",
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          },
                          pressed: {
                            fill: "#FF5722",
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          }
                        }}
                      />
                    )
                )
              }
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
        <ReactTooltip />
      </div>
    );
  }
}

export default ExcludeIncludeGeographies;