IP Address Tracker using React JS

Community feedback

• 

  Carl•855

  @CarlHummPosted 10 months ago

  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.

  Marked as helpful

  1

  ---

  

  Ayush Kumar Nath•280

  @ayushknathPosted 10 months ago

  @CarlHumm Thanks for the solution. And yes I'll update useState initialisation as you've mentioned.

  1