title: Getting data from Firebase not displaying with React JS?
body: <p>I got the below react js cod running with no errors but not sure why it's not displaying anything from the database in the <code>&lt;li&gt;</code> element.</p>
  
  <p>When I console log it in the ComponentWillMount, it pulls the data correctly.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>    class FirebaseDB extends React.Component {
        constructor(props) {
          super(props);
          this.state = { messages: [] };
        }
        componentWillMount(){
          let messagesRef = firebase.database().ref('messages');
          messagesRef.on('child_added', snapshot =&gt; {
            let message = { text: snapshot.val(), id: snapshot.key };
            console.log(message);
          })
        }
  
        render() {
          return (
            &lt;div&gt;
              &lt;ul&gt;
                { /* Render the list of messages */
                  this.state.messages.map( message =&gt; &lt;li key={message.id}&gt;{message.text}&lt;/li&gt; )
                }
              &lt;/ul&gt;
            &lt;/div&gt;
          );
        }
      }
  
  
  class App extends Component {
    render() {
      return (
        &lt;FirebaseDB /&gt;
      );
    }
  }
  </code></pre>