Get latitude and longitude on click on Map - reactjs

Question

I'm doing a little app using React Leaflet, and I want to add a marker on the map every time I click somewhere,
I don't know how to do it, I tried something below but the console log doesn't return something,
function App() {
const [position, setPosition] = useState([48.8534, 2.3488]);
const [markers, setMarkers] = useState([]);
function addMarker(e) {
console.log("e", e);
const newMarker = e;
setMarkers([...markers, newMarker]);
}
return (
<div className="App" style={{ width: "100%", height: "100vh" }}>
<MapContainer
center={position}
zoom={6}
scrollWheelZoom={true}
style={{ width: "100%", height: "100vh" }}
onClick={addMarker}
>
<MyComponent />
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{markers &&
markers.map((marker, index) => {
<Marker key={`marker-${index}`} position={marker}>
<Popup>
<span>Popup</span>
</Popup>
</Marker>;
})}
</MapContainer>
</div>
);
}
export default App;

Answer 1

react-leaflet just updated to version 3, which no longer support inline events like onClick. You need to use the useMapEvents hook. Example here.
import { MapContainer, useMapEvents } from 'react-leaflet'
function AddMarkerToClick() {
const [markers, setMarkers] = useState([]);
const map = useMapEvents({
click(e) {
const newMarker = e.latlng
setMarkers([...markers, newMarker]);
},
})
return (
<>
{markers.map(marker =>
<Marker position={marker}>
<Popup>Marker is at {marker}</Popup>
</Marker>
)}
</>
)
}
function App() {
return (
<div className="App" style={{ width: "100%", height: "100vh" }}>
<MapContainer {...} > {/* omit onClick */}
<AddMarkerToClick />
</MapContainer>
</div>
);
}
export default App;
I didn't get a chance to test this yet, but this should give you an idea.

Answer 2

import React, { memo, useEffect, useState } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Markers from './Markers'
const initialState = ({
lat: '18.4942031',
lng: '-69.8919176',
zoom: '13'
})
export const MapView = memo(({dataMap, searchHistory}) => {
const [ properties, setProperties ] = useState(initialState)
const setPropertiesOnMap = () =>{
setTimeout(function(){
setProperties({
lat: dataMap[0]?.latitude || '18.4942031',
lng: dataMap[0]?.longitude || '-69.8919176',
zoom: '18',
})
},500)
}
useEffect(() =>{
if(dataMap.length === 1){
setPropertiesOnMap()
}else{
setProperties(initialState)
}
//eslint-disable-next-line
},[dataMap])
return (
<Map center={{lat: properties.lat, lng: properties.lng}} zoom={properties.zoom} minZoom={8}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
{dataMap[0] && <Markers dataMap={dataMap} searchHistory={searchHistory} />}
</Map>
)
})
I did something similar, I hope it can help you