Pokemon List No HoC

pokemon_list_no_hoc.jsx

var PokemonList = React.createClass({
  getInitialState() {
    return {
      pokemon: [],
      selection: new Set(),
    };
  },
  
  fetchPokemon() {
    // Hit API, get pokemon, and set to pokemon on state.
    // Assume unsharable for... reasons.
  },
  
  onSelect(pokemon) {
    if(this.state.selection.has(pokemon)) {
      this.state.selection.delete(pokemon);
    } else {
      this.state.selection.add(pokemon);
    }
  },
  
  renderPokemon() {
    return pokemon.map(function(pokemon) {
      return(
        <tr>
          <td>
            <input type="checkbox" onClick={this.onSelect(pokemon)} checked={this.state.selection.has(pokemon)} />
          </td>
          <td>pokemon.name</td>
          <td>pokemon.id</td>
          <td>pokemon.types</td>
          <td>pokemon.favoriteAttack</td>
          <td>pokemon.isShiny</td>
        </tr>
      );
    });
  },

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th></th>
            <th>"Name"</th>
            <th>"ID"</th>
            <th>"Type(s)"</th>
            <th>"Favorite Attack"</th>
            <th>"Shiny?"</th>
          </tr>
        </thead>
        <tbody>
          this.renderPokemon();
        </tbody>
      </table>
    );
  },
});

export default PokemonList;