DEV Community

Discussion on: React Beginner Question Thread ⚛

Collapse
 
zizboudi profile image
Aziz Omar

Hello, Dan and everybody else in this thread,

My question is about refs.

I'm using a library called react-mapbox-gl github.com/alex3165/react-mapbox-gl, which is a React wrapper for mapbox-gl-js.

My goal is to show a driving route on the map from :
1- point A to point B.
2- then a flying direction from point B to point C
3- and finally another driving direction from Point C to point D

I already managed to do that but now, I want to give the ability to the user to tap on a button to flyTo the different destination.

The mapbox-gl-js has a method called flyTo that does exactly that by passing to it the appropriate coordinates.

I'm trying to use refs to get a reference to my map by adding <Map ref={(e) => { this.map = e; }} />... and then the goal is to use that ref to call the method when the user clicks on a specific button.

I can't figure out how to use refs to get to my solution.

here are more details and my current code: github.com/alex3165/react-mapbox-g...

Collapse
 
dan_abramov profile image
Dan Abramov
Collapse
 
zizboudi profile image
Aziz Omar

Thanks Dan, I replied to your reply over there as well

I still get Uncaught TypeError: _this.map.flyTo is not a function ... github.com/alex3165/react-mapbox-g...