Read機能の実装

コードを以下に示します．

import React from 'react';
import '../App.css';
import firebase from './Firebase/firebase';
import { Link } from 'react-router-dom';
import { CREATE, BUILD_UPDATE } from '../constants/routes';
import _ from 'lodash';

class Show extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: {}
    }
    this.ref = firebase.database().ref('tasks');
  }

  componentDidMount() {
    this.ref.once('value', (snapshot) => {
      const tasks = snapshot.val();
      this.setState({
        tasks: tasks
      })
    })
  }

  render() {
    return (
      <div>
        <h3><Link to={CREATE}>タスク作成</Link></h3>
        <table>
          <thead>
            <tr>
              <th>タイトル</th>
              <th>詳細</th>
              <th>期限</th>
            </tr>
          </thead>
          <tbody>
            {
              _.map(this.state.tasks, (value, key) => {
                return (
                  <tr key={key}>
                    <td><Link to={{pathname: BUILD_UPDATE(key), state: value}}>{value.title}</Link></td>
                    <td>{value.detail}</td>
                    <td>{value.deadline}</td>
                  </tr>
                )
              })}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Show;