Q: How to find lat/long properties in leaflet React I've been trying to integrate leaflet into my react app. Can't figure out how to read properties from the marker. I managed to do it in vanilla JavaScript, but can't apply it to React JS project. How do i find lat and long properties of a draggable marker?
import React, { useState, useEffect } from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import RangeSlider from "react-bootstrap-range-slider";
import L from "leaflet";

const MapComponent = () => {
  const [position, setPosition] = useState({
    lat: 51.505,
    lng: -0.09,
  });

  const [value, setValue] = useState();


  return (
    <div>
      <LeafletMap
        center={[50, 10]}
        zoom={6}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
        doubleClickZoom={true}
        scrollWheelZoom={true}
        dragging={true}
        animate={true}
        easeLinearity={0.35}
      >
        <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
        <Marker position={[50, 10]} draggable>
          <Popup>Popup for any custom information.</Popup>
        </Marker>
      </LeafletMap>

      <RangeSlider
        value={value}
        className="slider"
        max={2020}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
};

export default MapComponent;


A: Listen to marker's onDragEnd event to be able to extract the new marker coordinates:
 <Marker
     position={[50, 10]}
     draggable
     icon={icon}
     ondragend={handleDragEnd}
 >

...
const handleDragEnd = (e) => {
    const { lat, lng } = e.target.getLatLng();
    console.log(`Lat: ${lat}, Lon: ${lng}`);
  };

Demo

A: Actually, I imported leaflet library to use the icon on my Marker:
import  Leaflet from 'leaflet';

import mapMarkerImg from "../Smile-map.svg";

const mapIcon = Leaflet.icon({
  iconUrl: mapMarkerImg,
  iconSize:[58, 68],
  iconAnchor:[29, 68],

  popupAnchor:[170,2]
})

and then I can apply it on Marker component:
 <Marker icon={mapIcon} position={[-22.9094183, -43.1850019]}>
      <Popup
        closeButton={false}
        minWidth={240}
        maxWidth={240}
        className={"map-popup"}
      >
        Lar das meninas
        <Link to="/orphanages/1">
          <FiArrowRight size={20} color="#FFF" />
        </Link>
      </Popup>
    </Marker>

