How to resolve Typescript error -- mapbox-gl & React hooks

Question

New to Typescript and need some clarification on how to resolve typing errors.

I'm setting the Mapbox container to mapDiv.current--it's giving me this error:

Type 'HTMLDivElement | null' is not assignable to type 'string | HTMLElement'.Type 'null' is not assignable to type 'string | HTMLElement'.ts(2322)

Though this can be fixed by doing mapDiv.current || ''. Is this the right way to resolve this type issue?

export const Map: FunctionComponent = () => {
    const mapDiv = useRef<HTMLDivElement>(null);
    let [map, setMap] = useState(null);

    useEffect(() => {
        const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
            const map = new mapboxgl.Map({
                container: mapDiv.current, // ERROR
                container: mapDiv.current || '', // NO ERROR
                style: 'mapbox://styles/mapbox/outdoors-v11',
                center: [-121.91390991210938, 40.316184625814095],
                zoom: 10,
            })
            setMap(map);
        }

        !map && attachMap(setMap, mapDiv)

    }, [map])

    return (
        <div className="Map" ref={mapDiv} />
    )

}

wentjun · Accepted Answer · 2020-05-07 04:40:27Z

4

Instead of providing a fallback string value (which might not be the most elegant solution since it is looking for a RefObject), you might want to do a null/undefined check before mounting mapbox in the useEffect hook.

useEffect(() => {
  const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
    if (!mapDiv.current) {
      return;
    }
    const map = new mapboxgl.Map({
      container: mapDiv.current, // ERROR
      container: mapDiv.current || '', // NO ERROR
      style: 'mapbox://styles/mapbox/outdoors-v11',
      center: [-121.91390991210938, 40.316184625814095],
      zoom: 10,
    })
    setMap(map);
  }

  !map && attachMap(setMap, mapDiv)

}, [map]);

answered May 7, 2020 at 4:40

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andy Tran Over a year ago

Huh interesting--so the typescript linter will determine if a null/undefined value has been checked and therefore not throw the error? @wentjun

wentjun Over a year ago

Yep, that is because of the if (!mapDiv.current) statement that I have added on the attachMap method. It does an early return if the refObject is falsy. Therefore, anything that passes the check will definitely be defined. That's why there is no error.

wentjun Over a year ago

Anyways, have you tried the above code? And does it work?

Andy Tran Over a year ago

Ah I see that's interesting. Yep! It works, thanks for the help, very appreciated.

Collectives™ on Stack Overflow

How to resolve Typescript error -- mapbox-gl & React hooks

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related