Show popup for only one Marker react map gl

Question

I'm using react-map-gl and states so that when a marker is clicked on the popupOpen is set to true and the popup shows up.

This works with maps with only one marker but when I use a map fuction to send coords of multiple markers, clicking on any of them opens all popups because the binded state cotrols them all.

How do I set it up so that only the popup related to a specific marker shows up?

// state
const [popupOpen, setPopupOpen] = useState(false);

// marker & popup

          {landmarkData.map((data, index) => (
            <div key={data._id}>
              <Marker
                key={index}
                longitude={data.longitude}
                latitude={data.latitude}
                onClick={() => setPopupOpen(true)}
              >
                <RoomIcon fontSize="small" style={{fill: "red"}} />
              </Marker>
              {popupOpen && (
                <Popup
                  key={index}
                  latitude={data.latitude}
                  longitude={data.longitude}
                  onClose={() => setPopupOpen(false)}
                  closeButton={true}
                  offsetLeft={10}
                >
                  <span style={{fontSize: "1vw", fontFamily: "Poppins"}}>
                    {data.name}
                  </span>
                </Popup>
              )}
            </div>
          ))}

score 2 · Accepted Answer · answered Aug 15 '21 at 11:38

You should individually track the popup open state; like this:


// state
const [popupOpen, setPopupOpen] = useState({});

// render


          {landmarkData.map((data, index) => (
            <div key={data._id}>
              <Marker
                key={index}
                longitude={data.longitude}
                latitude={data.latitude}
                onClick={() => setPopupOpen({...popupOpen, popupOpen[data._id]: true })}
              >
                <RoomIcon fontSize="small" style={{fill: "red"}} />
              </Marker>
              {popupOpen[data._id] && (
                <Popup
                  key={index}
                  latitude={data.latitude}
                  longitude={data.longitude}
                  onClose={() => setPopupOpen(false)}
                  closeButton={true}
                  offsetLeft={10}
                >
                  <span style={{fontSize: "1vw", fontFamily: "Poppins"}}>
                    {data.name}
                  </span>
                </Popup>
              )}
            </div>
          ))}

Show popup for only one Marker react map gl

1 Answers1