React-leaflet Layerscontrol Throws Error When Moving Code Into Function

Sorry if it this has been answered somewhere else before! I am new to react-leaflet and struggle with this issue for some time now. The following code does not compile and and the

Solution 1:

From the documentation1, documentation2

Map: top-level component instantiating a Leaflet map and providing it to its children.

All components are React wrappers for Leaflet elements and layers, they need a map instance and therefore must be included in a top-level component.

LayersControl.Overlay uses Overlay class( doc) and inside Overlay class there is the following code:

classOverlayextendsControlledLayer{
  constructor(props: ControlledLayerProps) {
    super(props)
    this.contextValue = {
      ...props.leaflet,
      layerContainer: {
        addLayer: this.addLayer.bind(this),
        removeLayer: this.removeLayer.bind(this),
      },
    }
  }

  addLayer = (layer: Layer) => {
    this.layer = layer // Keep layer reference to handle dynamic changes of propsconst { addOverlay, checked, name } = this.props
    addOverlay(layer, name, checked)
  }
}

in the constructor addLayer is assigned a method which is this.addLayer. inside this.addLayer addOverlay is being destructured via props. Most likely at that point props do not contain addOverlay method and therefore cannot be retrieved so the error occurs.

As a result you cannot use LayersControl.Overlay the way you are trying to. There is not such an example and I think it is not possible as the map instance is not provided the way it should to LayersControl.Overlay