Render multiple elements on map google-map-react

Question

I have a trouble with rendering multiple elements using google-map-react. I'm doing everything like in example, with hardcoded element everything is okay, but with elements that I want to render using map method like I'm doing it with regular react components I have trouble. Here is a jsbin link where you can check it, in the map we should see 3 points, but now we have only the hardcoded one.

Answer 1

In your map function, you have to return your AnyReactComponent.

like this :

{Scenes.map(scene => {

      let lat=scene.coordinates[0];
      let lng=scene.coordinates[1];
      let sceneName=scene.name;

      console.log(`Latitude - ${lat}\nLongitude - ${lng}\nSceneName - ${sceneName}`);

      return <AnyReactComponent 
          lat={lat} 
          lng={lng} 
          text={sceneName} 
      />
})}