React-leaflet-draw / Cannot access EditControl component programmatically

Question

I'm trying to access EditControl functionality with editRef ( const editRef = useRef(); ) in order to access its handlers progammatically. Unfortunately, following warning appears in web dev tools : "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?".

Accordingly, when I try to access it I get undefined.

This is a common warning which is solved with forwardRef wrapping but in this case I don't know how it could be solved as I cannot access EditControl code to add the ref.

Is there any workaround in order for me to access EditControl component's object ?

<FeatureGroup>
      <EditControl
        ref={editRef}
        onDrawVertex={checkOverlapping}
        position='topright'
        onCreated={pushPolyToArr}
        draw={{
          rectangle: false,
          polyline: false,
          circle: false,
          marker: false,
          circlemarker: false
      />
    </FeatureGroup>

score 0 · Answer 1 · answered Jan 19 '22 at 22:03

...
let rectangleRef = useRef();

useEffect(() => {
    if (!rectangleRef.current || !isActiveSearchByArea) {
        return;
    }
    rectangleRef.current._toolbars.draw._modes.rectangle.handler.enable();
}, [rectangleRef, isActiveSearchByArea]);


const onMountedRect = (e) => {
    rectangleRef.current = e;
};

return (
    <FeatureGroup>
        <EditControl
            onMounted={onMountedRect}
            position='topright'
            draw={{
                rectangle: false,
                polyline: false,
                circle: false,
                circlemarker: false,
                marker: false,
                polygon: false
            }}
            edit={{
                edit: false,
                remove: false
            }}
        />
    </FeatureGroup>
);

React-leaflet-draw / Cannot access EditControl component programmatically

1 Answers1