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

constructor() {
  super()
  this.state = { isLoading: true }
}

componentDidMount() {
  ('fetch data').then(() => { this.setState({ isLoading: false }); })
}

render() {
  return (
    <div>
      {!this.state.isLoading && ('your code')}
    </div>
  );
}

Something like that.

Answer 2

You're going to need to conditionally render. Provide a loading state to be loaded prior to asynchronously required data. You'll want something like the following:

class WrapperComponent extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            isLoaded: false,
            data: null
        };
    }

    componentDidMount() {
        MyApiCall.then(
            res => this.setState({
                // using spread operator, you will need transform-object-rest-spread from babel or
                // another transpiler to use this
                ...this.state, // spreading in state for future proofing
                isLoaded: true,
                data: res.data
            })
        );
    }

    render() {
        const { isLoaded, data } = this.state;
        return (
            {
                isLoaded ?
                    <PresentaionComponentThatRequiresAsyncData data={ data } /> :
                    <LoadingSpinner /> // or whatever loading state you want, could be null
            }
        );
    }
}

Answer 3

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 })
   })
}