title: Wait for react-promise to resolve before render
body: <p>So I have a large set of data that I'm retrieving from an API. I believe the problem is that my component is calling the renderMarkers function before the data is received from the promise.</p>
  
  <p>So I am wondering how I can wait for the promise to resolve the data completely before calling my renderMarkers function?</p>
  
  <pre><code>class Map extends Component {
  
  componentDidMount() {
    console.log(this.props)
    new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: this.props.route.lat,
        lng: this.props.route.lng
      }
    })
  }
  
  componentWillMount() {
    this.props.fetchWells()
  }
  
  renderMarkers() {
    return this.props.wells.map((wells) =&gt; {
      console.log(wells)
    })
  }
  
  render() {
    return (
      &lt;div id="map" ref="map"&gt;
        {this.renderMarkers()}
      &lt;/div&gt;
    )
   }
  } 
  
  function mapStateToProps(state) {
    return { wells: state.wells.all };
  }
  
  export default connect(mapStateToProps, { fetchWells })(Map);
  </code></pre>