CODEWITHSUNDEEP
reactjstypescriptreact-google-maps
HonzaVrkota
HonzaVrkota

Reputation: 53

TS2531 | React useRef - Object is possibly undefined

I need to set new lat and lng to my google map in React
Const mapRef return error: Object is possibly 'null'. TS2531
When i used let instead of the React.useRef it works.
I think a should set type to mapRef, but i dont know which one and where i can find it.
But I think useRef is better solution, isnt it?

Google maps library: https://www.npmjs.com/package/@react-google-maps/api

const libraries = ["places"];

const CustomMap = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "MY_API_KEY",
    libraries,
  });

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  };

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  const panTo = React.useCallback(({ lat, lng }) => {
    if (null !== mapRef.current) {
      // There is error 
      // mapRef.current Object is possibly 'null'.  TS2531
      mapRef.current.panTo({ lat, lng });
      mapRef.current.setZoom(18);
    }
  }, []);
  //console.log("maps show coord: ", props.coordinates);

  if (loadError) {
    return (
      <Fragment>
        <p>Error</p>
      </Fragment>
    );
  }
  if (!isLoaded) {
    return (
      <Fragment>
        <p>loading</p>
      </Fragment>
    );
  }
  return (
    <div>
      <Search panTo={panTo} />
      <GoogleMap
        id="map"
        mapContainerStyle={mapContainerStyle}
        zoom={15}
        center={center}
        //options={options}
        onLoad={onMapLoad}
      />
    </div>
  );
};

Upvotes: 2

Views: 6641

Answers (3)

HonzaVrkota
HonzaVrkota

Reputation: 53

Solution is this:
Type for map instance is: google.maps.Map
Google maps library: npmjs.com/package/@react-google-maps/api

 const mapRef = useRef<google.maps.Map>();
 const onMapLoad = React.useCallback((map: google.maps.Map) => {
    mapRef.current = map;
    if (defaultLocation !== null && props.place_id !== "") {
      setCoords(defaultLocation);
      setDefaultZoom(14);
      map.panTo(defaultLocation);
      try {
        FetchPlaceDetail(props.place_id, map, props.setPlaceDetail);
      } catch (error) {
        console.error(error);
      }
    }
  }, []);

...

mapRef.current?.panTo({ lat, lng });

Upvotes: 0

Rodrigo Ehlers
Rodrigo Ehlers

Reputation: 1840

Use this package to find the types, then set the type for useRef and initialise it with null.

const mapRef: Type = React.useRef(null); // Replace `Type` with the actual type from the package

in your case the type seems to be google.maps.Map so

const mapRef: google.maps.Map = React.useRef(null);

should do the trick.

Upvotes: 5

inafalcao
inafalcao

Reputation: 1452

Yes, the type should be defined in React.useRef(), and it's only possible to know that if you tell what is the library you're using for the map. But before you tell that, try to research on the library documentation.

And about the null error, referencing this article

When you create a invoke a useRef hook, it’s important to pass null as the default value.

So the definition should be something like:

const mapRef = React.useRef<TheTypeYouNeed>(null);

Upvotes: 0

Related Questions