REACT - Converting an address to coordinates using geocode and then pass it to Map component of "google-maps-react" to display location on the map

Question

I am trying to convert a list of addresses to coordinates using "geocode" api and then showing on google maps using "Map" component of "google-maps-react", I was successful in converting to the coordinates but when I pass these coordinates to "initialCenter" prop the Map return blank...

my parent component "ListItem" looks like this:-

import React, { useEffect, useState } from "react";
import STYLES from "./listItem.scss";
import { IoLocationSharp } from "react-icons/io5";
import MapItem from "../MapItem/MapItem";
import { GoogleApiWrapper } from "google-maps-react";
import Geocode from "react-geocode";
Geocode.setApiKey("MY API KEY");

const ListItem = ({ item }) => {
  const getClassName = (className) => STYLES[className] || "UNKNOWN";
  const [address, setAddress] = useState(
    `${item.street} ${item.suburb} ${item.postcode}`
  );
  const [coordinates, setCoordinates] = useState(null);
  //find coordinates from the address
  Geocode.setRegion("au");
  Geocode.setLocationType("ROOFTOP");
  const findLatAndLng = () => {
    Geocode.fromAddress(address).then(
      (response) => {
        setCoordinates(response.results[0].geometry.location);
      },
      (error) => {
        console.error(error);
      }
    );
  };

  useEffect(() => {
    findLatAndLng();
  }, [address]);

  return (
    <div className={getClassName("listContainer")}>
      <div className={getClassName("listItemIcon")}>
        <IoLocationSharp />
      </div>
      <div className={getClassName("listItemDetails")}>
        <h3 className="name">{item.name} </h3>
        <span className={getClassName("street")}>{item.street},&nbsp;</span>
        <span className={getClassName("suburb")}>{item.suburb},&nbsp;</span>
        <span className={getClassName("postcode")}>{item.postcode}</span>
        {item.phoneNumber && (
          <p className={getClassName("phone")}>
            {`Ph: ${item.phoneNumber.slice(0, 4)} ${item.phoneNumber.slice(
              4,
              7
            )} ${item.phoneNumber.slice(7)}`}
          </p>
        )}
        {item.faxNumber && (
          <p className={getClassName("fax")}>
            {`Fax: (${item.faxNumber.slice(0, 2)}) ${item.faxNumber.slice(
              2,
              6
            )} ${item.faxNumber.slice(6)}`}
          </p>
        )}
      </div>
      <div className={getClassName("listMap")}>
        <MapItem coordinates={coordinates} />
      </div>
    </div>
  );
};

export default GoogleApiWrapper({
  apiKey: "MY API KEY",
})(ListItem);

and my "MapItem"component looks like this:-

import React, { Component, useEffect, useState } from "react";
import { Map, Marker } from "google-maps-react";

const MapItem = ({ coordinates }) => {
  const mapStyles = {
    width: "130px",
    height: "130px",
  };
  const renderMap = (coordinates) => {
    return (
      <Map
        google={google}
        style={mapStyles}
        zoom={12}
        initialCenter={{ lat: coordinates?.lat, lng: coordinates?.lng }}
      >
        <Marker position={{ lat: coordinates?.lat, lng: coordinates?.lng }} />
      </Map>
    );
  };

  console.log(coordinates);
  return renderMap(coordinates);
};

export default MapItem;

console.log(coordinates) is showing values but i am getting following error and a blank map:- "setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value"

Can anybody suggest what is wrong here?

Answer 1

Well the solution was kind of simple i had to intially check the coordinates if its empty or not...

coordinates && (
        <Map
          google={google}
          style={mapStyles}
          zoom={12}
          initialCenter={{
            lat: coordinates?.lat,
            lng: coordinates?.lng,
          }}
        >
          <Marker
            position={{
              lat: coordinates?.lat,
              lng: coordinates?.lng,
            }}
          />
        </Map>
      )