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

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() : (
      Loading wells...
    )
  }
}