How do you call fitBounds() when using leaflet-react?

Question

I cannot figure out how to call fitBounds() on the Leaflet map.

If I was just using vanilla leaflet, this solution would work perfectly: Zoom to fit all markers in M

Answer 1

Here is an example how to accomplish it via react-leaflet

handleClick() {
    const map = this.mapRef.current.leafletElement;  //get native Map instance
    const group = this.groupRef.current.leafletElement; //get native featureGroup instance
    map.fitBounds(group.getBounds());
}

where

    Zoom
    
 

which corresponds to

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

Here is a demo