Currently I've got a ticket to build a react page with a map view.
Since it's a react app, I chose to use the Mapbox GL JS package. It allows you to load the map view as well as add custom markers.
In my case I have a list of companies to show in this app, and I also need to render the markers for each of the companies. At the same time I need to have filters on the result of companies. So the markers need to be re-rendered every time the results get filtered.
That requires me to remove the markers when I need to render new markers. So I will need an array to store the markers. I tried to declare a global variable first, but it wouldn't work, I guess it had something to do with the closure issue. Then I did a search using the key words such as 'how can I have properties in a function component'. Then I got the answer that I should can declare an array like:
const markers = useRef([])
And when I need to access it I will have to use
markers.current instead of markers
Top comments (0)