react-leaflet get current latlng onClick

What did you try to achieve that?

This will be the start:

Use the click (see https://leafletjs.com/reference-1.4.0.html#map-click) event from the LeafletMap component and call your function, like:

<LeafletMap
  center={[35.755229,51.304470]}
  zoom={16}
  maxZoom={20}
  attributionControl={true}
  zoomControl={true}
  doubleClickZoom={true}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
  onclick={this.handleClick}>
>
...
</LeafletMap>

In your handleClick function you get the information of lat and lng like this:

handleClick = (e) => {
  const { lat, lng } = e.latlng;
  console.log(lat, lng);
}

From here on, you can create your marker / popup with the information you were looking for.

Additional hint: Please make sure your code is wrapped in correctly in your post..

If you work with react-leaflet version 3.x this does not work. In this case, use the useMapEvents hook in a dummy component that you add to the map. For example, if you want to console.log the clicked position:

const LocationFinderDummy = () => {
    const map = useMapEvents({
        click(e) {
            console.log(e.latlng);
        },
    });
    return null;
};

Then use the LocationFinderDummy in the map as follows:

<MapContainer
    center={[0, 0]}
    zoom={6}>
    <LocationFinderDummy />
</MapContainer>

Here is an example on how to display maker position in popup once map is clicked:

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPos: null
    };
    this.handleClick = this.handleClick.bind(this);
  }


  handleClick(e){
    this.setState({ currentPos: e.latlng });
  }

  render() {
    return (
      <div>
        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
          <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          { this.state.currentPos && <Marker position={this.state.currentPos} draggable={true}>
            <Popup position={this.state.currentPos}>
              Current location: <pre>{JSON.stringify(this.state.currentPos, null, 2)}</pre>
            </Popup>
          </Marker>}
        </Map>
      </div>
    )
  }
}

Explanation:

• currentPos state is used to keep marker position
• event.latLng property of Map.onClick event handler returns mouse event location

Here is a demo for your reference