Issue iterating state from firebase in react

Question

I have this component in react that get todo from firebase, build an array and set a state, but when I render the component I only can see the elements the first time, if I reload the page the state seems to be empty.

import React, { PureComponent } from 'react';
import firebase from 'firebase'

class Charts extends PureComponent {
    constructor(props) {
        super(props);
        this.state = { data: [] };
        this.todoRef = firebase.database().ref('Todo');
    }

    componentDidMount = () => {
        var data = [];
        this.todoRef.on('value', (snapshot) => {
            const todos = snapshot.val();
            for (let id in todos) {
                data.push({ id, ...todos[id] });
            }
        });

        this.setState({ data: data })
    }

    render() {
        return <div>
            {this.state.data.map(item => (
                <p>{item.name}</p>
            ))}
        </div>
    }
}

export default Charts;

If I use console log I get an array(0) with elements inside. I have tried locating the setState in different life cicles methods but don't seems to work.

Answer 1

Issue

You are calling this.setState outside the snapshot handler, so you are only passing the empty ([]) data array to the state updater.

Solution

You should move the state update into the function processing the snapshot.

componentDidMount = () => {
  const data = [];
  this.todoRef.on('value', (snapshot) => {
    const todos = snapshot.val();
    for (let id in todos) {
      data.push({ id, ...todos[id] });
    }
    this.setState({ data });
  });
}