React-leaflet: Component Overlay cannot handle arrays of components

[awjreynolds]

I wanted to move the markers from just sitting on the map into a layer. I had a .map iterating over data returning me an array of markers and these were happily being rendered.

By moving the markers into the Overlay I get the following error

Overlay.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Simialr happens for BaseLayer.

render () {
    return (
      <div>
        <Map crs={ Leaflet.CRS.Simple }
          bounds={ [[0, 0], [1000, 1000]] }
          minZoom={ -5 }>
          <LayersControl position='topright'>
            <BaseLayer checked name='THE.BASELAYER'>
              <ImageOverlay url='/images/DefaultMap.jpg' bounds={ [[0, 0], [1000, 1000]] } />
            </BaseLayer>
            { [ <Marker key='1' position={ [0, 0] }>
              <Popup>
                <span>A pretty CSS3 popup. <br /> Easily customizable.</span>
              </Popup>
            </Marker>,
              <Marker key='2' position={ [100, 0] }>
                <Popup>
                  <span>A pretty CSS3 popup. <br /> Easily customizable.</span>
                </Popup>
              </Marker> ] }
            <Overlay checked name='Layer group with circles'>
              { [ <Marker key='3' position={ [300, 300] }>
                <Popup>
                  <span>A pretty CSS3 popup. <br /> Easily customizable.</span>
                </Popup>
              </Marker>,
                <Marker key='4' position={ [400, 300] }>
                  <Popup>
                    <span>A pretty CSS3 popup. <br /> Easily customizable.</span>
                  </Popup>
                </Marker> ] }
            </Overlay>
          </LayersControl>
        </Map>
      </div>
    );

[PaulLeCam]

Hi,
Please only use GitHub issues to report possible bugs in the library.
You can use the react-leaflet tag in StackOverflow for general questions about it.

[allthesignals]

@awjreynolds were you able to get anywhere on this? I'm having the same issue. Not sure if it has something to do with the map properties types? https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/custom-component.js

In the example, it sets up prop types, but not sure where the documentation for that is.

Thanks!

[awjreynolds]

@allthesignals It has to do with putting everything into a Layergroup. It's not very clear from the example. I can post code tomorrow. When I have time I'll put a pull request in on the example show map usage within LayerControl.

[awjreynolds]

@allthesignals Hope this helps
``` renderInterfaceLoop (interfaceLoop) {
return (
!interfaceLoop.devices || !interfaceLoop.devices.length
? null
:
{ this.renderDeviceMarker(interfaceLoop) }
{ _.map(interfaceLoop.devices, this.renderDeviceMarker) }
{ interfaceLoop.links.map(this.renderDeviceLink) }


);
}

render () {
const bounds = [[0, 0], [520, 1024]];
const _props = isOnDevice()
? {
ref: 'loopmap',
crs: Leaflet.CRS.Simple,
bounds: bounds,
dragging: false,
doubleClickZoom: false,
maxBounds: bounds,
zoomControl: false,
scrollWheelZoom: false
}
: {
ref: 'loopmap',
crs: Leaflet.CRS.Simple,
bounds: bounds,
dragging: true,
doubleClickZoom: true,
maxBounds: bounds,
zoomControl: true,
scrollWheelZoom: true
};

return (
  <div className='loop-map' >
    <Map { ..._props } >
      <LayersControl position='topright'>
        <BaseLayer checked name='Site Map'>
          <ImageOverlay url='/images/Rotork_Default_Map.jpg' bounds={ bounds } interactive={ false } />
        </BaseLayer>
        { this.props.interfaces ? _.map(this.props.interfaces, this.renderInterfaceLoop) : null }
      </LayersControl>
    </Map>
  </div>
);

}
```

[allthesignals]

Thank you!

I wrote a separate ReactClass and use it in the render() of the parent component... I was confused who to get passed props to update, but this seems to work fine.

const PointsMap = ({ position, zoom, points, center }) => {
  return (
      <Map center={center} zoom={zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {
          points.map((point, index) => 
          <Marker position={[point.lat, point.lng]} key={index}>
          </Marker>
        )}
      </Map>)
} 

[vietnugent]

I'm facing similar error after upgrading react-leaflet 1.14 ->1.6.6, react 15.4.2->15.6.1. Still debugging...

 const foo = <FeatureGroup/>;

<Map>
  <LayersControl.Overlay checked name='Areas'>
     <LayerGroup>
       //{ null } : ok
      // {[foo]} : error
    </LayerGroup>
  </LayersControl.Overlay>
</Map>

Uncaught Error: LayerGroup.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

[sixertoy]

Hey, same here and different behaviors
In my case i've got a backoffice managin many "graphical maps" with differents datas under a single react-leaflet component.
I've observed that a

<LayersControl.Overlay checked key={`layerscontrol-${key}`} name={key}>
    <LayerGroup>{parsegroups[key] || null}</LayerGroup>
</LayersControl.Overlay>

throws when parsegroups[key] (array) contains only one item

[omrivardi]

had a similar problem.
Solved but inserting a div in between:

<LayerGroup>
   <div>
    {layerJsx} // an array of jsx elements
  </div>
</LayerGroup>

[sixertoy]

@omrivardi have you tried with <React.Fragment> instead of <div> ?