Markers update when Markers array is updated - possible?

[kevinjavitz]

Is there a way to do as the title says? I want the markers on the map to update when the markers array is updated. Or the easiest / cleanest way to accomplish this?

Code:

declaring the markers array:

const [markers, setMarkers] = useState([
    {position: {lat: 30, lng: 10}},
    {position: {lat: 40, lng: 20}},
    {position: {lat: 50, lng: 30}}
  ]);

the return:

 {markers.map((marker, index) => (
        <AdvancedMarker
        key={index}
        ref={markerRef}
        position={marker.position}
        onClick={handleMarkerClick}
      />
      ))}

when I do this the markers on the map should be updated:

markers.pop()
setMarkers(markers)

So far I have only had success by using the reference to the marker as outlined here: https://visgl.github.io/react-google-maps/docs/api-reference/components/advanced-marker#useadvancedmarkerref and then doing this:

marker.setMap(null)

but it involves a lot of extra code and seems not the greatest way.

[usefulthink]

I suspect the problem here is that you aren't actually changing the identity of the markers array. React will basically only update if oldThing !== newThing, which isn't the case if you manipulate the array in place.

Can you give this a try: Instead of markers.pop(); setMarkers(markers);, use markers.pop(); setMarkers([...markers]);, creating a copy of the array before setting it as new state.

[usefulthink]

Here's some more patterns for dealing with this kind of problem: https://blog.alexdevero.com/immutable-arrays-objects-in-javascript/

[kevinjavitz]

Yes that was it now it works perfectly 👏😀