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

Answer 1

So I have the similar problem, with react and found out solution on my own. by using Async/Await calling react Code snippet is below please try this.

 import Loader from 'react-loader-spinner'

 constructor(props){
    super(props);
    this.state = {loading : true}
  }
  getdata = async (data) => {
    return await data; 
  }
  getprops  = async (data) =>{
    if (await this.getdata(data)){
      this.setState({loading: false})
    }
  }
  render() {
  var { userInfo , userData} = this.props;
    if(this.state.loading == true){
      this.getprops(this.props.userData);
    } 
    else{
//perform action after getting value in props
    }
    return (
      

      {
           this.state.loading ? 
             
           :    
               // place your react component here
      }
      
      )
}