CODEWITHSUNDEEP
reactjsexpoesri-leaflet
kboy
kboy

Reputation: 67

Error: App(...): Nothing was returned from render. Esri-Leaflet-Geocoder

I am using esri-leaflet-geocoder to create a geosearch bar in my expo project. I am using this demo as a guildline:https://codesandbox.io/s/2wy7v2orwr?file=/src/Map.js:1443-1466. I am running into an error that is Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. and I can't seem to find the right slution. Here is my code:

import { StatusBar } from 'expo-status-bar';
import React, { Component, createRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import L from 'leaflet';
import * as ELG from 'esri-leaflet-geocoder';
import { Map, TileLayer } from 'react-leaflet';


export default function App() {
  class MapComp extends Component {
    componentDidMount() {
      const map = this.leafletMap.leafletElement;
      const searchControl = new ELG.Geosearch().addTo(map);
      const results = new L.LayerGroup().addTo(map);
  
      searchControl.on("results", function(data) {
        results.clearLayers();
        for (let i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      });
    }
  
    render() {
      const center = [37.7833, -122.4167];
      return (
        <Map
          style={{ height: "100vh" }}
          center={center}
          zoom="10"
          ref={m => {
            this.leafletMap = m;
          }}
        >
          <TileLayer
            attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors"
            url={"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
          />
          <div className="pointer" />
        </Map>
      );
    }
  }
    
      

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Upvotes: 0

Views: 100

Answers (1)

Jad Al-Hamwi
Jad Al-Hamwi

Reputation: 169

The Error is right on point, you're declaring a class Based Component(MapComp) inside the functional Component(App) but the app component is not returning anything to render in the DOM , so when you want to mount your React Application into the DOM,React is not identifying any Render method from App Component(which is just a return in Functional Component), make sure to return something from your Functional Component(App). you're not actually returning anything from it.

Upvotes: 0

Related Questions