TypeScript type for MapboxGLjs React ref hook

Question

I'm trying to add a source for my mapboxgl map which I am writing in React with hooks and TypeScript.

export default function App() {
  const mapContainer = React.useRef<any>(null);
   const map = React.useRef<any>(null);
   const [lng, setLng] = React.useState(-74.0632);
   const [lat, setLat] = React.useState(40.7346); 
   const [zoom, setZoom] = React.useState(12);

  React.useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: zoom
    });
    map.addSource('property-data', {
      type: 'geojson',
      data: 'path/to/data.geojson'
    });
    
  });

I am encountering the following error:

Property 'addSource' does not exist on type 'MutableRefObject'

What type then should I use if not any?

Alex Wayne · Accepted Answer · 2021-07-13 23:29:27Z

6

You want to keep a mapboxgl.Map in the ref, and you also want it to be null before it's initialized. So that means your ref type is:

const map = React.useRef<mapboxgl.Map | null>(null);

This is good to fix (it's good to eliminate all uses of any), but that has nothing to do with the error you are getting.

When you have a ref, you always access what it's referencing via the current property. So you simply need to change your last lines to this:

map.current.addSource(/* ... */)

Working example playground

answered Jul 13, 2021 at 23:29

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

1 Comment

Kyle Over a year ago

Alex coming to my rescue again. I caught that “current” mistake shortly after posting. 🙄 Thanks for your help again, Alex!

Collectives™ on Stack Overflow

TypeScript type for MapboxGLjs React ref hook

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related