I am trying to draw circles and add popup on a map, but i keep getting errors. Cannot read properties of undefined (reading 'lng')

Question

1. This piece of code is from my App.js

2. I am using this as the default location of the map once the app opens

   const [mapCenter, setMapCenter] = useState({lat: 34.80746, lng: -40.4796});

3. I use this to update the location of the map, as selected from the dropdown menu, I am getting the lat and lng from data pulled from an endpoint

   setMapCenter([data.countryInfo.lat, data.countryInfo.lng]);

4. I am passing the following props to the Map

    ```<Map center={mapCenter}
      zoom={mapZoom}
      countries={mapCountries}
      casesType={casesType}
      />```
   

5. This is from my utils.js file, colors of the said circles according to their case types

    ```import { Circle, Popup } from "react-leaflet";
   
      const casesTypeColors = {
      cases: {
        hex: "#CC1034",
        rgb: "rgb(204, 16, 52)",
       half_op: "rgba(204, 16, 52, 0.5)",
       multiplier: 800,
        },
   
      recovered: {
       hex: "#7dd71d",
       rgb: "rgb(125, 215, 29)",
       half_op: "rgba(125, 215, 29, 0.5)",
        multiplier: 1200,
      },
        deaths: {
       hex: "#fb4443",
       rgb: "rgb(251, 68, 67)",
        half_op: "rgba(251, 68, 67, 0.5)",
       multiplier: 2000,
       },
       };```
   

6. This is from my utilis.js. I am trying to draw the circle and popup on the map. Console error (Uncaught TypeError: Cannot read properties of undefined (reading 'lng')

     ```export 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>
        <h6>Is the POPUP working</h6>
     </Popup>
     </Circle>
       ))
       );```
   

7. This is from my Map.js. Console error (Uncaught TypeError: Cannot read properties of undefined (reading 'lng')

         ```import { showDataOnMap } from './utils';
   
           function Map({center, zoom, countries, casesType}) {
                return (
              <div className='map'>
      <LeafletMap center={center} zoom={zoom} scrollWheelZoom={false} >
         <TileLayer
         attribution='&copy; <a 
         href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           />
            {showDataOnMap(countries, casesType)} 
      </LeafletMap>
                 </div>
            )
             }
   
             export default Map```
   

Answer 1

The problem is in your showDataOnMap function where you render the Circle:

<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>
    <h6>Is the POPUP working</h6>
  </Popup>
</Circle>

All of the properties of the Circle (center, fillOpacity, color etc) are defined after you've already closed the Circle element with a >. This should be changed to:

<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
      }
    >

There's a working demo here that renders the circles.