🐛 [open-formulieren/open-forms#5038] Missing map shapes in summary

Because the geoJsonGeometry is available before the featureGroupRef is set, can the useEffect hook not draw the map shapes

Author: robinmolen

src/components/Map/LeafletMap.jsx

@@ -92,17 +92,27 @@ const LeaftletMap = ({
     onGeoJsonGeometrySet?.(newFeatureLayer.toGeoJSON().geometry);
   };
 
-  useEffect(() => {
-    // Remove all shapes from the map.
-    // Only `geoJsonGeometry` should be shown on the map.
-    featureGroupRef.current?.clearLayers();
-    if (!geoJsonGeometry) {
-      return;
-    }
-    // Add the current `geoJsonGeometry` as shape
-    const layer = Leaflet.GeoJSON.geometryToLayer(geoJsonGeometry);
-    featureGroupRef.current?.addLayer(layer);
-  }, [geoJsonGeometry]);
+  useEffect(
+    () => {
+      if (!featureGroupRef.current) {
+        // If there is no feature group, nothing should be done..
+        return;
+      }
+
+      // Remove all shapes from the map.
+      // Only `geoJsonGeometry` should be shown on the map.
+      featureGroupRef.current.clearLayers();
+      if (!geoJsonGeometry) {
+        return;
+      }
+      // Add the current `geoJsonGeometry` as shape
+      const layer = Leaflet.GeoJSON.geometryToLayer(geoJsonGeometry);
+      featureGroupRef.current.addLayer(layer);
+    },
+    // `featureGroupRef.current` is needed as dependency to make sure that
+    // the featureGroupRef can be used.
+    [geoJsonGeometry, featureGroupRef.current]
+  );
 
   return (
     <>