Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pokemon List HoC
var PokemonList = React.createClass({
propTypes: {
onSelect: React.PropTypes.func.isRequired,
selection: React.PropTypes.object.isRequired,
},
getInitialState() {
return {
pokemon: [],
};
},
fetchPokemon() {
// Hit API, get pokemon, and set to pokemon on state.
// Assume unsharable for... reasons.
},
renderPokemon() {
return pokemon.map(function(pokemon) {
return(
<tr>
<td>
<input type="checkbox" onClick={this.props.onSelect(pokemon)} checked={this.props.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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment