title: ReactJS - how to get firebase result and pass down to sub component properly
body: <p>I have some records in the firebase, this code is to fetch it and put the result to a subcomponent. Here's the code</p>
  
  <pre><code>import React from "react";
  
  export default class Home extends React.Component{
      componentWillMount(){
          this.firebaseRef = new Firebase('https://sweltering-heat-7923.firebaseio.com/contact');
          this.firebaseRef.once("value", function (snapshot){
              snapshot.forEach(function(data){
                  console.log(data.val());
              });
          });
      }
      render(){ 
          return(
              &lt;List /&gt;
          )
      }
  }
  
  class List extends React.Component{
      render(){ 
          return(
              &lt;div class="row"&gt;
                  // populate props from Home component
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>What I don't how to do is passing the response data to sub component which is List in this case.</p>
  
  <p>And the firebase data look like this:</p>
  
  <pre><code>object {
      id:12131323, 
      firstName:'john', 
      address: {steet:'some street', city:'havana'}
  }
  object {
      id:12221232, 
      firstName:'joe', 
      address:{steet:'big street', city:'dubai'}
  }
  </code></pre>