Get clicked location latitude and longitude - reactjs

Question

I have this React code:
import React, { Component } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './Map.css';
import L from 'leaflet';
import { geolocated } from 'react-geolocated';
class Map extends Component {
render() {
const DEFAULT_LATITUDE = 32.313268;
const DEFAULT_LONGITUDE = 35.022895;
const latitude = this.props.coords ? this.props.coords.latitude : DEFAULT_LATITUDE;
const longitude = this.props.coords ? this.props.coords.longitude : DEFAULT_LONGITUDE;
return (
<MapContainer className="leaflet-map" center={[latitude, longitude]} zoom={17} scrollWheelZoom={true}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[latitude, longitude]}>
<Popup>
Here you are ^_^
</Popup>
</Marker>
</MapContainer>
);
}
}
export default Map;
How can I add an event to get latitude and longitude of the position when the map clicked?
In the leaflet documentation there is something like:
map.on('click', function(e) {
alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
});
But how can I do this with ReactJS?

Answer 1

First take the map instance using whenCreated prop on MapContainer
<MapContainer
className="leaflet-map"
center={[latitude, longitude]}
zoom={17}
scrollWheelZoom={true}
style={{ height: "100vh" }}
whenCreated={(map) => this.setState({ map })}
>
Second use it on componentDidUpdate when it is defined to listen to on map click event
componentDidUpdate(prevProps, prevState) {
const { map } = this.state;
if (prevState.map !== map && map) {
map.on("click", function (e) {
alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng);
});
}
}
Demo