React: How to wait data before using “this.state.x” into a function?

Question

I\'m currently learning React, and some stuff are not so easy for a newbie...

I have a simple component which renders this (note that it renders a

Answer 1

You can initialize the state with empty data before fetching, in constructor like this

constructor(){
 ....,
 this.state = { house: null}
}

And put a condition in getSlots method which checks if data is fetched or not

getSlots (viewing) {

    if (!this.state.house) {
       return [];
    }

    SOME STUFF...

    const monday = this.state.house.monday

    return SOME STUFF...
  }

When the data arrives, then simply set the corresponding state like this

componentDidMount(){
   fetch().then((houses) => {
      this.setState({ houses: houses })
   })
}