Async function with a loading screen

Question

I am setting state in the constructor like this - this is for text that says "Fetching data...":

this.state = {
      loading: true
    }

Then I have an async function like this, which will get some data.

componentDidMount() {
    this.fetchData().done()
  }

  async fetchData() {
    const response = await fetch(URL)
    const json = await response.json()
    const stars = json.stargazers_count
    this.setState({ stars })
  }

How do I know when I can set the isLoading state to false and hide the loading text and display the data? I seem to be missing some piece here!

Thanks Jordan

@FelixKling isn't it formally accepted as an ES7 proposal though? I'd say that's close enough. — Patrick Roberts
– Patrick Roberts, Commented Oct 21, 2016 at 6:06
@patrick: Proposals are not part of any release until they reach stage 4. ES7(ES2016) was released this year and does not contain async/await (ecma-international.org/ecma-262/7.0). It will be part of ES2017. — Felix Kling
– Felix Kling, Commented Oct 21, 2016 at 6:12

jmurzy · Accepted Answer · 2016-10-17 00:46:49Z

1

When you insert stars in your state, you can also set isLoading to false

this.setState({ stars, isLoading: false });

answered Oct 17, 2016 at 0:46

jmurzy

3,9431 gold badge19 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Async function with a loading screen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related