LeafletJs Map is immutable, therefore, even though the component rerenders the map does not, to overcome that you have to pass a component that will force the map to rerender too. ``` //change map view since map container is immutable const ChangeMapView = ({ coords }: { coords: [number, number] }) => { const map = useMap(); map.setView(coords, map.getZoom()); return null; }; ``` This forces the map to rerender using the new coords that you pass, my answer is written in TypeScript and useMaps is imported from react-leafletjs itself. All you have to do is pass the component between the MapContainer with the same data that you pass to the map itself, once your data changes, it would reflect on the map. ``` ``` Here is a full working code sample. ``` import React, { FC } from "react"; import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet"; import * as L from "leaflet"; import { IMAP } from "../@types/map"; import "leaflet/dist/leaflet.css"; export const Map: FC = ({ data }) => { //change map view since map container is immutable const ChangeMapView = ({ coords }: { coords: [number, number] }) => { const map = useMap(); map.setView(coords, map.getZoom()); return null; }; return ( {data?.region} ); }; ```

Ikechukwu Peter

All solutions

ip-address-tracker