Render async data, retrived from firebase

Question

I am fetching data from my firebase database in componentDidMount method.

componentDidMount = () => {
    firebase.database().ref('posts').on('value', (snapshot) => {
        this.setState({
            posts: snapshot.val()
        })
    })
}

I want use this data in my render method. The problem is - when the render method executes, my state is not updated yet, because its async and the state is null. How can I render my data after state changes and i will have my data in my state ?

Possible duplicate of Rendering data from Firebase in React

JeremyW
– JeremyW

2019-01-28 21:03:04 +00:00
Commented Jan 28, 2019 at 21:03 — JeremyW
– JeremyW, Commented Jan 28, 2019 at 21:03

Valerii · Accepted Answer · 2019-01-28 23:09:32Z

3

Before data is retrieved posts field in state is null. Then posts is set and render is called again. You can do something like this:

render(){
   if (!this.state.posts){
      return <div>Loading</div>;
   }

   return <div>Render your posts here...</div>
}

answered Jan 28, 2019 at 23:09

Valerii

2,3272 gold badges17 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Render async data, retrived from firebase

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related