how to change the color prop dynamically of a Circle component in react-leaflet?

Question

I am new in react-leaflet. So in this below code, I didn't find where the problem is. why the color and fillColor property is not updating in <Circle /> Component from react-leaflet.But when i am doing console.log(casesTypeColors[casesType].hex) the value is updating when casesType changes but it is not reflecting on screen. But other properties are updating. So, please help me to learn where i am doing mistakes. Thanks in advance.

import { Circle } 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,
  },
};
// Draw circles on the map with interactive tooptip
export const showDataOnMap = (data, casesType = "cases") =>
  data.map((country, index) => (
    <Circle
      key={index}
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType] / 10) *
        casesTypeColors[casesType].multiplier
       }
    >
    </Circle>
  ));

Lunt

can we see where youre using showDataOnMap? where are you logging the .hex value? – Dispatch

Answer 1

In the showDataOnMap function write:

<Circle pathOptions={{color: casesTypeColors[casesType].hex,
                     fillColor: casesTypeColors[casesType].hex }}>

instead of

<Circle color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}>

Maximilianus