How to get coordinates of current mouse click in leaflet react js

Question

I'm trying to get coordinates of where the mouse clicks on the map but .locate() only returns the center coordinates of the map. Is there a way? ps. I am not using class based react. Thanks

 <MapContainer
          center={[ 33.8735578, 35.86379]}
        zoom={9}
        scrollWheelZoom={true}
  
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
</MapContainer>

Answer 1

you can get coordinates of mouse click by useMapEvents hook.

try this one.

const MapEvents = () => {
    useMapEvents({
      click(e) {
        // setState your coords here
        // coords exist in "e.latlng.lat" and "e.latlng.lng"
        console.log(e.latlng.lat);
        console.log(e.latlng.lng);
      },
    });
    return false;
}

    return (
       <MapContainer
          center={[ 33.8735578, 35.86379]}
          zoom={9}
          scrollWheelZoom={true}
       >
          <TileLayer
          attribution='&copy; <a 
           href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
            <MapEvents />
    </MapContainer>
    )

Answer 2

Question and where is your code? You are not new to this site so you should know to show what you have done so far. Okay, I will be gracious today ;) I don't want to cut and clean the code, so I paste as is.

import { useEffect } from 'react';
import { MapContainer, useMap, TileLayer, } from 'react-leaflet';
import L from 'leaflet';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const GetCoordinates = () => {
  const map = useMap();

  useEffect(() => {
    if (!map) return;
    const info = L.DomUtil.create('div', 'legend');

    const positon = L.Control.extend({
      options: {
        position: 'bottomleft'
      },

      onAdd: function () {
        info.textContent = 'Click on map';
        return info;
      }
    })

    map.on('click', (e) => {
      info.textContent = e.latlng;
    })

    map.addControl(new positon());

  }, [map])


  return null

}

const MapWrapper = () => {
  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <GetCoordinates />

    </MapContainer>
  )
}

export default MapWrapper;