How can I make the Leaflet Popup to show when i click on a list button

Question

I am trying to test something with react leaflet. I am displaying 2 different machines on map and when i click a specific list button(distinguished by machine id), it moves the center of the map to the position coordinates of that machine. The popups are already added but they only shows when i click the marker on map. I want the Popup to show automatically whenever I click the list button(currently I have to click on the marker on map for it to popup) and it should close like it's usual normal behavior(this is by default). Any idea how can I do this?

PS: I have tried to use refs and even with that it is working partially. ...

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },
      ],         
    };

  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  openPopUp(marker, id) {
    if (marker && marker.leafletElement) {
      marker.leafletElement.openPopup(id);
    }
  }

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    console.log(this.state);
    return (
      <>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {this.state.location.map(({ lat, lng, id }) => {
            return (
              <Marker
                position={[lat, lng]}
                icon={this.Icon}
                ref={this.openPopUp(id)}
              >
                <Popup> {id} </Popup>
              </Marker>
            );
          })}




        </Map>

        {
          <List style={{ width: "20%", float: "left" }}>
            {this.state.location.map(({ id, machine, lat, lng }) => {
              return (
                <ListItem
                  key={id}
                  button
                  onClick={() => {
                    this.clickAction(id, lat, lng);
                  }}
                >
                  Id {id} <br />
                  machine {machine}
                </ListItem>
              );
            })}
          </List>
        }
      </>
    );
  }
}

...

Asper

Answer 1

The way you're defining your refs is not going to work. Beause you're trying to add refs in a map statement, you need an array to keep track of those refs. In your constructor:

this.markerRefs = []

Then in each marker, add the ref to that array:

<Marker
  position={[lat, lng]}
  icon={this.Icon}
  ref={ref => this.markerRefs[id] = ref} >
  { ... }
</Marker>

Now that your markers have unique references, you can use them in your clickAction function:

clickAction(id, lat, lng) {
  this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  this.markerRefs[id].leafletElement.openPopup()
}

Here is a working codesandbox

Nominative