title: Reading data from Firebase 3 into a React component with ES6 syntax
body: <p>I've been struggling with a simple use case: read a number, ie signed-up user counts, on my React web app from Firebase Database and display it when the page is loaded.</p>
  
  <p>There is documentation for older versions of React and Firebase, but it would seem that this use case should be doable the new way.</p>
  
  <p><a href="http://i.stack.imgur.com/Pggd4.png" rel="nofollow">Screenshot of my Firebase Database.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import {Badge} from 'react-bootstrap'
  var firebase = require('firebase')
  var config = {
    apiKey: "MyKey", // redacted key
    authDomain: "dnavid-c48b6.firebaseapp.com",
    databaseURL: "https://dnavid-c48b6.firebaseio.com",
    storageBucket: "dnavid-c48b6.appspot.com",
  };
  var firebaseApp = firebase.initializeApp(config);
  var UCRef = firebaseApp.database().ref("numberofusers")
  class UserCount extends React.Component{
    constructor(props){
      super(props)
      this.state = {usercount: '3'}
    }
    componentDidMount() {
      // this.setState({usercount:4}) // This actually works and displays "4"
      var uc = UCRef.on('value',function(snapshot){return(snapshot.val())})
      debugger;
      this.setState({usercount:uc}) // This does not work
    }
    render(){
      return (
        &lt;Badge&gt;
          {this.state.usercount}
        &lt;/Badge&gt;
      )
    }
  }
  export default UserCount;                                                                              </code></pre>
  </div>
  </div>
  </p>
  
  <p>In the Chrome debugger (note "debugger" command) I get in the console:</p>
  
  <p><code>&gt; uc
  &lt;. function(snapshot) {
          return snapshot.val();
        }</code></p>
  
  <p>And</p>
  
  <p><code>&gt; uc()
  Uncaught TypeError: Cannot read property 'val' of undefined(…)</code></p>
  
  <p>From which I would deduce that since the snapshot is undefined, the event has not been triggered. But this doesn't sound logical as:</p>
  
  <ol>
  <li>componentDidMount has been evaluated (because the component has rendered and the execution reaches it when the debugger stops for inspection)</li>
  <li>Firebase documentation claims that the event is triggered, see below "<em>This method is triggered once when the listener is attached</em>".</li>
  </ol>
  
  <blockquote>
    <p><strong>Value events</strong>
    You can use the value event to read a static snapshot of the contents
    at a given path, as they existed at the time of the event. This method
    is triggered once when the listener is attached and again every time
    the data, including children, changes. The event callback is passed a
    snapshot containing all data at that location, including child data.
    If there is no data, the snapshot returned is null.</p>
  </blockquote>
  
  <p>So, is the listener not being attached? What's going on?</p>