Exercise for "Hacking with React" ch 20 "Refactoring our State Code: Passing Parameters in onClick"

Details.js

import React from 'react';
import ajax from 'superagent';

class Detail extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mode: 'commits',
      commits: [],
      forks: [],
      pulls: []
    };

  }

  componentWillMount() {
    this.fetchFeed('commits');
    this.fetchFeed('forks');
    this.fetchFeed('pulls');
  }

  fetchFeed(type) {
    ajax.get(`https://api.github.com/repos/facebook/react/${type}`)
    .end((error, response) => {
      if(!error && response) {
        this.setState({ [type]: response.body });
      } else {
        console.log(`There was an error fetching ${type} from GitHub`, error);
      }
    });
  }

  selectMode(mode) {
    this.setState({ mode });
  }

  render() {
    let content;

    content =  this.state[this.state.mode].map((item, index) => {
      let html_url = item.html_url;
      let body;
      let created_at = '';
      let user;

      if(this.state.mode === 'commits') {
        user = item.author ? item.author.login : 'anonymous';
        body = item.commit.message;
      } else if(this.state.mode === 'forks') {
        user = item.owner ? item.owner.login : 'anonymous';
        body = html_url;
        created_at = ` at ${item.created_at}`;
      } else {
        user = item.user ? item.user.login : 'anonymous';
        body = item.body;
      }

      return (<p key={index}>
                <strong>{user}</strong>;
                <a href={html_url}>{body}</a>{created_at}
              </p>);
    });


    return (<div>
      <button onClick={this.selectMode.bind(this, 'commits')}>Show Commits</button>
      <button onClick={this.selectMode.bind(this, 'forks')}>Show Forks</button>
      <button onClick={this.selectMode.bind(this, 'pulls')}>Show Pulls</button>
      {content}
    </div>);
  }
}

export default Detail;