Last active
October 16, 2016 04:20
-
-
Save chaintng/7707cc0be32ed586d95c62133cab0974 to your computer and use it in GitHub Desktop.
react-step-2.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Pokedex = React.createClass({ | |
getInitialState: function() { // 1) Setup initial state | |
return { | |
filterPokemonType: null, | |
filterPokemonAtk: null, | |
}; | |
}, | |
filterPokemonByTypeAndMinAtk: function (allPokemons, filterPokemonType, filterPokemonAtk) { | |
// ... Filter function just like in jQuery | |
}, | |
onFilterPokemonTypeChange: function(e) { | |
// 2) function for setting new state value of filterPokemonType | |
this.setState({ filterPokemonType: e.target.value }) | |
}, | |
onFilterPokemonAtkChange: function(e) { | |
// 2) function for setting new state value of filterPokemonAtk | |
this.setState({ filterPokemonAtk: e.target.value }) | |
}, | |
render: function() { | |
// 3) Before re-render, it should recalculate filterPokemon from new state value | |
var filterPokemon = this.filterPokemonByTypeAndMinAtk(allPokemons, this.state.filterPokemonType, this.state.filterPokemonAtk); | |
return (<div> | |
<Filter | |
onFilterPokemonAtkChange={this.onFilterPokemonAtkChange} {/* 4) Pass onChange function via property */} | |
onFilterPokemonTypeChange={this.onFilterPokemonTypeChange} | |
/> | |
<Result filterPokemon={filterPokemon} /> {/* 5) Pass filtered pokemon via property */} | |
</div>); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment