four-maps.jsx

// Your map info
const MAPS = {
  mapbox: {
    url:
      "https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={access_token}",
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    access_token:
      "--YOUR-MAPBOX-ACCESS-TOKEN--",
  },
  openStreetMap: {
    url: "https://{s}.tile.openstreetmap.fr/hot//{z}/{x}/{y}.png",
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>',
  },
  stamen: {
    url: "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",
    attribution:
      'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  },
  HERE: {
    url: `https://1.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?apiKey={apiKey}`,
    attribution: `Map &copy; 1987-${new Date().getFullYear} <a href="http://developer.here.com">HERE</a>`,
    apiKey: "--YOUR-HERE-API-KEY--",
  },
};

// Updated my-map.jsx

import React from "react";
import { Map as LeafletMap, Marker, Popup, TileLayer } from "react-leaflet";

const TOWER_LOCATION = [43.385807, -8.406524];

const MyMap = ({url, attribution, tileParams}) => (
  <LeafletMap center={TOWER_LOCATION} zoom={16}>
    <TileLayer url={url} attribution={attribution} {...tileParams} />
    <Marker position={TOWER_LOCATION}>
      <Popup>
        <b>Tower of Hercules</b>
        <br />
        UNESCO World Heritage site
      </Popup>
    </Marker>
  </LeafletMap>
);

export default MyMap;

// Component that prints all the maps you throw at him
const Maps = maps => (
  <div id="maps">
    {maps.map(myMap => { 
      const { url, attribution, ...tileParams } = myMap;
      return <MyMap url={url} attribution={attribution} tileParams={tileParams} />
    })}
  </div>
);

// Print the four maps

<Maps maps={Object.values(MAPS)} />