how to make my Popup appear in reactJS automatically upon selecting an option? Leaflet-js

Question

I am using Leaflet JS

export const showDataOnMap = (data, casesType ='cases', selectedCountry) => 
data.map(country => (
    <Circle
        center={[country.countryInfo.lat, country.countryInfo.long]}
        fillOpacity={0.4}
        pathOptions={country.countryInfo.iso2 === selectedCountry
                        ? casesTypeColors[casesType].highlight /* if selectedCountry then highlight circle! */
                        : casesTypeColors[casesType].option
        }   
        
    radius = {
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier / 2
    }
    >
    
    <Popup popupopen={country.countryInfo.iso2 === selectedCountry ? Popup.openPopup()}>
        <div className="info-container">
            <div
                className='info-flag'
                style={{backgroundImage: `url(${country.countryInfo.flag})`}}
            />
            <div className='info-name'>{country.country}</div>
            <div className='info-cases'>Cases: {numeral(country.cases).format("0,0")}</div>
            <div className='info-recovered'>Recovered: {numeral(country.recovered).format("0,0")}</div>
            <div className='info-deaths'>Deaths: {numeral(country.deaths).format("0,0")}</div>
        </div>
    </Popup>
</Circle>

When i select an option from my dropdown menu, aka "country.countryInfo.iso2 === selectedCountry", I would like for my that is within my component to appear immediately. However, i am not exactly sure how to use the .openPopup method into a component. I basically just want the pop up to appear the moment the condition "country.countryInfo.iso2 === selectedCountry" is true.

I am using Leaflet JS

https://covid-19-tracker-fd62a.web.app/ here is the demo currently when i click the circle, the popup appears, i want to also have the popup with my dropdown selection — natisaver, Jan 04 '21 at 02:06
Take a look into this: https://stackoverflow.com/a/53807825/8283938 — Falke Design, Jan 04 '21 at 11:09

score 1 · Accepted Answer · answered Jan 06 '21 at 13:47

To open popup per Circle (and when certain conditions are met) the following component could be introduced:

function CountryPOI(props) {
  const { selected } = props;
  const ref = useRef(null);

  useEffect(() => {
    if (selected) {
      ref.current.openPopup();
    }
  });

  return (
    <Circle ref={ref} {...props} >
      <Popup position={props.center}>{props.name}</Popup>
    </Circle>
  );
}

where selected prop determines whether popup should be open or not.

The following example shows how to open a popup for the first item:

<CountryPOIs data={data} selectedIndex={0} />

where CountryPOIs component renders the list of markers(circles):

function CountryPOIs({ data, selectedIndex }) {
  return data.map((item, i) => (
    <CountryPOI
      key={i}
      selected={i === selectedIndex}
      center={[item.position.lat, item.position.lng]}
      fillOpacity={0.5}
      radius={100000}
      name={item.name}
    ></CountryPOI>
  ));
}

Here is a live demo which demonstrates how to open popup upon selecting an option.

how to make my Popup appear in reactJS automatically upon selecting an option? Leaflet-js

1 Answers1