React leaflet close popup on button click

Question

When I click on Marker, Popup appears. Popup has a customized 'close' button. I want to use this button instead of default "X" in upper-right corner.

I have seen these two questions: close popup react-leaflet after user click on button in popup
How can I make the Leaflet Popup to show when i click on a list button

popupRef.current._closeButton.click() is not an option as I want to hide default close button - it doesn't work when I keep Popup property closeButton={false}

When I click on my button I get an error TypeError: Cannot read property 'closePopup' of undefined

import React, {useRef} from 'react';
import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';

const MyComponent = () => {

    const popupElRef = useRef(null);

    const hideElement = () => {
        popupElRef.current.leafletElement.closePopup();
    }

    return (
            <MapContainer
                ref={mapRef}
                <Marker>
                    <Popup ref={popupElRef} closeButton={false}>
                        <button onClick={hideElement}>Close popup</button>
                    </Popup>
                </Marker>
            </MapContainer>
    );
};

export default MyComponent;

When I use console.log(popupElRef) , I see an object without leafletElement method. Neither I see anything that relates to leaflet methods.

options: {children: {…}}
_closeButton: a.leaflet-popup-close-button
_container: div.leaflet-popup.leaflet-zoom-animated
_containerBottom: -7
_containerLeft: -62
_containerWidth: 124
_contentNode: div.leaflet-popup-content
_events: {remove: Array(2)}
_initHooksCalled: true
_latlng: LatLng {lat: 50.50, lng: 15.67}
_leaflet_id: 1148
_map: NewClass {options: {…}, _handlers: Array(6), _layers: {…}, _zoomBoundLayers: {…}, _sizeChanged: false, …}
_mapToAdd: NewClass {options: {…}, _handlers: Array(6), _layers: {…}, _zoomBoundLayers: {…}, _sizeChanged: false, …}
_source: NewClass {options: {…}, _latlng: LatLng, _initHooksCalled: true, _popup: NewClass, _events: {…}, …}
_tip: div.leaflet-popup-tip
_tipContainer: div.leaflet-popup-tip-container
_wrapper: div.leaflet-popup-content-wrapper
_zoomAnimated: true
__proto__: NewClass

Is there any way my reference would work?

Answer 1

You have at least two ways to do that:

First use map.closePopup() by taking a reference to the map instance source

Second use popupElRef.current._close(); by taking a reference to the popup element as you were already trying to achieve. leafletElement is deprecated I think in version 3.x and was used only in version 2.x.

const [map, setMap] = useState(null);
const popupElRef = useRef(null);

const hideElement = () => {
    if (!popupElRef.current || !map) return;
    // popupElRef.current._close();
    map.closePopup();
};
...
<MapContainer
      center={position}
      zoom={13}
      style={{ height: "100vh" }}
      whenCreated={setMap}
    >
...

Demo