Todo list + Firebase + React Component

todolist+firebase+react component.jsx

import React from "react";
import firebase from "firebase";
import config from "./config.json";

firebase.initializeApp(config);

class TodoList extends React.Component {
  state = {
    todos: []
  };

  componentDidMount() {
    // #1
    const todoRef = firebase.database().ref("todos");

    // #2
    this.listener = todoRef.on("value", snapshot => {
      // #3
      this.setState({ todos: snapshot.val() || [] });
    });
  }

  componentWillUnmount() {
    // #4
    this.listener.off();
  }

  render() {
    return (
      <ul>
        {this.state.todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
      </ul>
    );
  }
}