Wait for react-promise to resolve before render

Question

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.

So I am wondering how I can wait for the promise to resolve the data completely before calling my renderMarkers function?

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) => {     console.log(wells)   }) }  render() {   return (     <div id="map" ref="map">       {this.renderMarkers()}     </div>   )  } }   function mapStateToProps(state) {   return { wells: state.wells.all }; }  export default connect(mapStateToProps, { fetchWells })(Map); 

Answer 1

You could do something like this to show a Loader until all the info is fetched:

class Map extends Component {   constructor () {     super()     this.state = { wells: [] }   }    componentDidMount() {     this.props.fetchWells()       .then(res => this.setState({ wells: res.wells }) )   }    render () {     const { wells } = this.state     return wells.length ? this.renderWells() : (       <span>Loading wells...</span>     )   } }