React Native: make API request, set State, and THEN render?

Viewed 877

Sorry if this is obvious somewhere in the documentation, but I am trying to wait until my state is set on a parent component before rendering a child component:

Paraphrasing:

class Parent extends Component {

  componentWillMount() {
    firestack.database.ref()
      .then((snapshot) => {
        this.setState({myVal: snapshot.val})
      })
  }

  render() {
    // Renders before request finishes setting state,
    // Child component receives an undefined val
    return (
      <ChildComponent
        myVal={this.state.myVal}
      />
    )
  }
}

My render hits before the request finishes, so I'm not able to pass the new State to the child component's constructor. How can I properly do this? Hopefully this is low hanging fruit to someone.

3 Answers
Related