title: How to retrieve data from firebase in React?
body: <p>I am making a todo-list app using React.
  I'm able to save data into firebase database. However, I don't know how to retrieve those data and put them in JSX. I can print them in the console. Currently, I only output the todo lists by typing in the bar and press enter.</p>
  
  <p>Here is my code. It's kinda messy.</p>
  
  <pre><code>   import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import firebase from 'firebase';
  
  var config = {
      apiKey: "**********************",
      authDomain: "react-to-do-list-a8f6d.firebaseapp.com",
      databaseURL: "https://react-to-do-list-a8f6d.firebaseio.com",
      projectId: "react-to-do-list-a8f6d",
      storageBucket: "react-to-do-list-a8f6d.appspot.com",
      messagingSenderId: "673689778313"
  };
  firebase.initializeApp(config);
  
  const database = firebase.database();
  const ref = database.ref('todos');
  
  
  
  
  // const todos = []
  class Index extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              todo: '',
              todos: [],
              // database: 
          }
          this.handleInput = this.handleInput.bind(this)
          this.addTask = this.addTask.bind(this)
          this.check = this.check.bind(this)
      }
      handleInput(e) {
          this.setState({
              todo: e.target.value
          })
      }
      addTask(e) {
          if (e.keyCode === 13) {
              this.setState({
                  todos: this.state.todos.concat(this.state.todo)
              })
              e.target.value = ''
              ref.push(this.state.todo)
          }
      }
      check(e) {
          if (e.target.style.textDecoration === "") {
              e.target.style.textDecoration = " line-through"
          } else {
              e.target.style.textDecoration = ""
          }
      }
  
  
      render() {
  
          ref.on('value', gotData, errData)
  
          function gotData(data) {
              let todos = data.val()
              // console.log(todos)
              let keys = Object.keys(todos)
              // console.log(keys)
              for (let i = 0; i &lt; keys.length; i++) {
                  let key = keys[i]
                  let todo = todos[key]
                  console.log(todo)
              }
          }
  
          function errData(err) {
              console.log('Error !')
              console.log(err)
          }
  
          return (
              &lt;div className='container'&gt;
                  &lt;h1&gt;To Do List&lt;/h1&gt;
                  &lt;input value={this.state.term} onKeyDown={this.addTask} onChange={this.handleInput} placeholder="  Add your tasks here"&gt;&lt;/input&gt;
                  &lt;ul&gt;
                      {this.state.todos.map(x =&gt; {
                          return (
                              &lt;li&gt;
                                  &lt;input type="checkbox" id={x} name={x} value={x} /&gt;
                                  &lt;label for={x}&gt;{x}&lt;/label&gt;
                              &lt;/li&gt;
                          )
                      })}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  ReactDOM.render(&lt;Index /&gt;, document.getElementById('root'));
  </code></pre>