Rendering Firebase list on React

Question

I followed this https://www.youtube.com/watch?v=p4XTMvagQ2Q introductory tutorial on Firebase and React. I am trying to take this further but I have been stuck for a while. Basically, I want to retrieve a list of child from a firebase node and render it as list/table. Currently, only the last child is being rendered since every other one is being overwritten.

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      id : 0,
      latitude : 0,
      longitude : 0
  };
}

componentDidMount(){
  const rootRef = firebase.database().ref().child('drivers');
  rootRef.on('child_added', snap => {
      console.log(snap.key);
      this.setState({
        id : snap.key,
        latitude : snap.val().lat,
        longitude : snap.val().lon
      });
  });
}


render() {
  return (
  <div className="App">
    <h1>{this.state.id}</h1>
    <h1>{this.state.latitude}</h1>
    <h1>{this.state.longitude}</h1>
  </div>
);
}
}

export default App;

How do I update the render function to display the whole list?

Answer 1

What is happening is you're retrieving the whole list, but for every element in the list, you're overriding your state with its value. Then, in your state, you'll always have the last values from the list.

What you can do in this case is store a list of elements, let's say positions:

this.state = {
    listOfPositions: []
};

Then when a child is added, you append the contents of the new child to your current list:

rootRef.on('child_added', snap => {
    const previousList = this.state.listOfPositions;
    previousList.append({
        id: snap.key,
        latitude: snap.val().lat,
        longitude: snap.val().lon
    });
    this.setState({
        listOfPositions: previousList;
    });
});

Finally, in your render method, you generate a list of react elements for every element in your listOfPositions and render it in the render method:

render() {
    const listOfPositions = this.state.listOfPositions.map(position => 
        <div>
            <h1>{position.id}</h1>
            <h1>{position.latitude}</h1>
            <h1>{position.longitude}</h1>
        </div>
    );
    return (
        <div>{listOfPositions}</div>
    );
}

Note that when you're setting your reference to the database and you get your value from this.state.listOfPositions, you can't guarantee that the state value is the most updated one. So if you want to be sure about it use the other definition for the this.setState() method like this:

rootRef.on('child_added', snap => {
    const newPosition = {
        id: snap.key,
        latitude: snap.val().lat,
        longitude: snap.val().lon
    };
    this.setState(previousState => {
        listOfPositions: previousState.listOfPositions.append(newPosition);
    });
});

This will make sure when you call this.setState() you will have the last value of state in your previousState variable.