TS2531 | React useRef - Object is possibly undefined

Question

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>
  );
};

@RodrigoEhlers Google maps library: https://www.npmjs.com/package/@react-google-maps/api — HonzaVrkota, Jul 13 '20 at 20:17

Rodrigo Ehlers · Answer 1 · 2020-07-14T19:14:23.967

5

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.

edited Jul 14 '20 at 19:14

answered Jul 13 '20 at 20:22

Rodrigo Ehlers

1,830
11
25

I cannot find right types. But when i tried this: `let mapRef: google.maps.Map;` It works. But this type for useRef<> doesnt work. – HonzaVrkota Jul 14 '20 at 11:31
@HonzaVrkota I updated the answer so the next person knows how to do it. Would be nice if you can accept the answer. – Rodrigo Ehlers Jul 14 '20 at 19:16
1

I tried this `const mapRef: google.maps.Map = React.useRef(null);`. But it returns new error `Type 'MutableRefObject' is missing the following properties from type 'Map': addListener, fitBounds, getBounds, getCenter, and 31 more. TS2740` – HonzaVrkota Jul 15 '20 at 05:24

score 0 · Answer 2 · answered Jul 13 '20 at 19:52

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);

Google maps library: https://www.npmjs.com/package/@react-google-maps/api — HonzaVrkota, Jul 13 '20 at 20:17

score 0 · Answer 3 · answered Aug 04 '20 at 12:41

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 });

TS2531 | React useRef - Object is possibly undefined

3 Answers3