React-Leaflet map is not rendering data on map

Question

Props coming from App.js like below

<div className="app__maps">
  <h3>I am map</h3>
  <Map countries={mapCountries} center={mapCenter} zoom={mapZoom} />
</div>

Map.js code as follows, Data is fine but inside showDataOnMap() is not adding circle in MapContainer

import React from "react";
import "./Map.css";
import { MapContainer, TileLayer, Marker, Popup, Circle } from "react-leaflet";

const casesTypeColors = {
  cases: { hex: "#cc1034", multiplier: 800, },
  recovered: {hex: "#7dd71d", multiplier: 1200, },
  death: { hex: "#fb4443", multiplier: 2000, },
}; 
const showDataOnMap = (data, casesType = "cases") => {
  data.map((country) => {
    <Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >
      <Popup>
        <h4>I am popup</h4>
      </Popup>
    </Circle>;
  });
};

function Map({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <MapContainer
        center={center}
        zoom={zoom}
        doubleClickZoom={true}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

        {showDataOnMap(countries, casesType)}
      </MapContainer>
    </div>
  );
}

export default Map;

Data Generating like below data image

please help why data is not rendering on my map? result should be like below image

Answer 1

You are not returning anything inside showDataOnMap that is the reason you do not see any circles. Use return keyword or don't use curly braces to return the result of the loop and the function itself.

const showDataOnMap = (data, casesType = "cases") => {
  return data.map((country) => {
    return <Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >
      <Popup>
        <h4>I am popup</h4>
      </Popup>
    </Circle>;
  });
};

Demo