React-Learflet - Change circle opacity when clicked

Question

I'm trying to change my circle Opacity when I click on it to act as an active state

I declared my state

const [active, setActive] = useState(false)

My function

  const sidebarTrigger = () => {
    setActive(true)
  }

this is how i'm trying to change it, inside my MapContainer

fillOpacity= {active ? '0.9' : '0.7'}

MapContainer

  <MapContainer whenCreated={setMap}  center={[selectedRegion['lat'],selectedRegion['long']]} zoom={selectedRegion['zoom']} scrollWheelZoom={true}>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {props.regionC.map((item,i) =>  {
                <Circle 
                  eventHandlers={{ click: sidebarTrigger.bind(this, item.city,item.lat,item.long) }}
                  center={item.city === 'Johannesburg'  || item.city === 'Johhensburg' ? [-26.195246,28.034088] : [item.lat ,item.long]}
                  color= '#EE7E18'
                  fillColor="#EE7E18" 
                  fillOpacity= {active ? '0.9' : '0.7'}
                  weight="0"
                  radius={radius}
                />
                )
            }

             })}
        </MapContainer>

score 1 · Accepted Answer · answered Sep 15 '22 at 17:34

The React Leaflet docs state that the props of child components are immutable:

By default these props should be treated as immutable, only the props explicitely documented as mutable in this page will affect the Leaflet element when changed.

so this explains why the opacity of the <Circle> does not update when you change the value of active.

If you use a ref, this will allow you to perform operations on the Circle. In the code below, we get a ref to the <Circle> and the click event handler calls updateActiveState() which updates the value of the active state:

const circleRef = useRef();

const updateActiveState = () => {
  setActive((prevState) => !prevState);
};
...

<Circle
  eventHandlers={{
    click: () => {
      updateActiveState();
    },
  }}
  ...
  fillOpacity={active ? '0.9' : '0.5'}
  ...
  ref={(ref) => {
    circleRef.current = ref;
  }}
/>

You can then define an effect that calls Leaflet's setStyle method to update the fillOpacity of the Circle based on the value of active. This will be executed whenever the value of active changes:

useEffect(() => {
  if (circleRef.current) {
    circleRef.current.setStyle({ fillOpacity: active ? '0.9' : '0.5' });
  }
}, [active]);

See this StackBlitz for a working demo.

React-Learflet - Change circle opacity when clicked

1 Answers1