title: React component inside function map()
body: <p>Hello I have a question about react component. What I want to do is render a component inside the map function and pass the component inside the map function the object returned in each iteration.</p>
  
  <p>The code above works fine for me.</p>
  
  <pre><code>export class MapContainer extends Component {
      constructor(props) {
          super(props);
  
          const style = {
              width: '100%',
              height: '100%'
          }
      }
  
      render() {
          return (
              &lt;Map 
                  google={this.props.google}
                  style={this.style}
                  initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                  zoom={11}&gt;
  
                  &lt;Marker onClick={this.onMarkerClick} name={'Current location'} /&gt;
              &lt;/Map&gt;
          );
      }
  }
  </code></pre>
  
  <p>But as I said before I want to put the component Marker inside a the map function but it doesn't works properly:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
  
  export class MapContainer extends Component {
      constructor(props) {
          super(props);
  
          const style = {
              width: '100%',
              height: '100%'
          }
  
          const objMarkers = [
              {
                  title: "The marker`s title will appear as a tooltip.",
                  name: "Soma",
                  position: [35.85472104, "14.48779873"]
              },
              {
                  title: "The marker`s title will appear as a tooltip.",
                  name: "Soma",
                  position: ["35.9220325", "14.37038234"]
              }
          ]
      }
  
      render() {
          return (
              &lt;Map 
                  google={this.props.google}
                  style={this.style}
                  initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                  zoom={11}&gt;
  
                  return this.objMarkers.map((marker) =&gt; 
                      &lt;Marker title={marker.title} name={marker.name} /&gt;
                  );
              &lt;/Map&gt;
          );
      }
  }
  
  const LoadingContainer = (props) =&gt; (
    &lt;div&gt;Fancy loading container!&lt;/div&gt;
  )
  
  export default GoogleApiWrapper({
    apiKey: ("AIzaSyBHq-A0EL3usDeqH5q8B635Rafxcguc0a8"),
    LoadingContainer: LoadingContainer
  })(MapContainer)
  </code></pre>
  
  <p>Thank you very much for your help!!!</p>