title: Passing a property aquired asynchronously
body: <p>I have this code:</p>
  
  <pre><code>export default class FinancesPage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {users: []};
      }
      componentWillMount() {
      firebase.database().ref('Users').orderByChild('transactions').startAt(1).on('value', snap =&gt; {
              const users = arrayFromObject(snap.val());
              this.setState({users: users});
          });
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;NumberOfPurchasesComponent users={this.state.users}/&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>And this code:</p>
  
  <pre><code>export default class NumberOfPurchasesComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {users: this.props.users};
      }
      componentWillMount() {
  
          const users = this.state.users;
  
          // Do stuff here    
      }
      render() {
          return (
              {/*And render stuff here*/}
          );
      }
  }
  </code></pre>
  
  <p>What's happening right now: The parent element <code>FinancesPage</code> passes an empty array of <code>users</code> to the child <code>NumberOfPurchasesComponent</code>. I need it to pass a new value of the array every time there is an update.</p>
  
  <p>And i want to pass the <code>users</code> from <code>FinancesPage</code> to <code>NumberOfPurchasesComponent</code>, but users data is obtained async. How can I make the <code>NumberOfPurchasesComponent</code> refresh when the variable value is obtained?</p>