Leaflet popup won't open (React)

Question

I'm working on a map view for a react application which I'm using Leaflet for (react-leaflet). I'm able to plot markers on the map, but the popups that I have bound to them won't open when clicked. I first tried using <Marker> and <Popup> components, but this Github issue suggested it might be better to just grab the leaflet map object from the map component and explicitly bind markers to it. This is what I have:

componentDidUpdate() {
    this.map = this.refs.map.leafletElement;
    this.state.rows.map((row) => {
        var marker = L.marker([row.coordinate.latitude, row.coordinate.longitude]);
        marker.addTo(this.map);

        var popupText = util.format('<b>%s</b>', row.venue)
        for(var i = 0; i < row.beers.length; i++){
            var beer = row.beers[i];
            popupText += util.format('<br>%s: %s - %d', beer.brewery, beer.name, beer.rating)
        }

        marker.bindPopup(popupText);
        //marker.on('click', function(e){console.log('clicked!')})
    });
}

render(){
    const cover = {position: 'absolute', left: 0, right: 0, top: 50, bottom: 0};
    return(
        <div>
            <Map scrollWheelZoom={false} center={this.state.position} zoom={14} style={cover} ref="map">
                <TileLayer
                  url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                />
            </Map>
        </div>
    );
}

Even if I uncomment the marker.on('click'...) line, the console.log never seems to fire. Anyone have any ideas as to what might be going on?

Joel Joel · Accepted Answer · 2016-07-28T14:14:31

This issue is out of date as of October 7, 2015. Adding children with action listeners has been fixed. Here is an example of how you can add zoom actions in a popup.

<Marker position={position}>
    <Popup>
      <span>
        <button onClick={this.zoomOut}>
          Zoom out
        </button >
        <button onClick = {this.zoomIn}>
          Zoom in
        </button>
      </span>
    </Popup >
  </Marker>

This jsfiddle is a working example.

Leaflet popup won't open (React)

1 Answers