How To Update State From Firebase Realtime? | React.js

I have an html element that needs to updated every time there is a change in Firebase. What I've done so far is this implement this particular function: componentWillMount() {

Solution 1:

One thing that stands out to me is how you're handling this. You should be able to use a arrow function to maintain scope:

updateDb.on("value", (snapshot) => {
  this.setState({ currentToken: snapshot.val() });
});

The other thing that stands out is

document.getElementById("tokenField").innerHTML =
  "Current Token: " + that.state.currentToken;

React will not update that element when you call setState. React will update any components requiring state by calling the render method. I don't know what the rest of your code looks like, but assuming that is a component that you are rendering, you should update it in render like this:

<div id="tokenField">
    Current token {this.state.currentToken}
</div>