IP Address Tracker using React JS

Hi there

I saw your comment on discord and have taken a brief look for you. So far I can see that:

1. You enter your IP Address
2. You click submit
3. Coordinates is updated and passed to your Map component
4. Map does not move

The reason the map does not move is due to Immutability of MapContainer

Except for its children, MapContainer props are immutable: changing them after they have been set a first time will have no effect on the Map instance or its container. The Leaflet Map instance created by the MapContainer element can be accessed by child components using one of the provided hooks.

So once our new coordinates reach our Map component, we cannot use the MapContainer props directly to set the view (like we did with center on initialization).

Instead we must use a custom component and the useMap() hook. The useMap() hook provides our custom component with an instance of our Map, and exposes some helpful functions which allow us to change the view for our map. The useMap() hook knows which map instance to use by default based on which MapContainer we have nested our custom child component within.

Here is a simple example based on your Map component

import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import { Icon } from "leaflet";
import CustomIcon from "../assets/icon-location.svg";

function UpdateMap({latitude, longitude}) {
  const map = useMap();
  map.setView([latitude, longitude], map.getZoom());
  return null
}


const Map = ({ lat, lng }) => {
  const customIcon = new Icon({
    iconUrl: CustomIcon,
    iconSize: [30],
  });

  return (
    <MapContainer
      id="map"
      center={[lat, lng]}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[lat, lng]} icon={customIcon}>
        <Popup>
          <b>Latitude: </b>
          {lat} <b>Longitude: </b>
          {lng}
        </Popup>
      </Marker>
      <UpdateMap latitude={lat} longitude={lng} />
    </MapContainer>
  );
};

export default Map;

Also, I see in App.js you have done this

 <Map lat={coords[0] || 51.505} lng={coords[1] || -0.09} />

Instead of providing an expression with the OR operator you could take those default values (51.505, -0.09) and use them as initial values for your useState. Like this:

const [coords, setCoords] = useState([51.505, -0.09]);

Hope this helps! I'll be happy to clear up any questions if you have any.