react.leaflet.popup.App.js

import { useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';

function App() {
  const [popupRefReady, setPopupRefReady] = useState(false);
  const markerRef = useRef();

  useEffect(() => {
    markerRef.current?.openPopup();
  }, [popupRefReady]);

  return (
    <MapContainer center={[38.907192, -77.036873]} zoom={8}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png"
      />
      <Marker
        position={[38.907192, -77.036873]}
        icon={
          new Icon({
            iconUrl: markerIconPng,
            shadowUrl: markShadowPng,
          })
        }
        ref={markerRef}
      >
        <Popup ref={() => setPopupRefReady(true)}>
          Washington, D.C. is the capital city and federal district of the United States.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;