react-step-1.jsx

react-step-1.jsx

var Result = React.createClass({
    render: function() {
        return (<div>
            <div>--- Total Filter Pokemon: {this.props.filterPokemon.length} ---</div>
            <ul>
                <li></li> {/* how each pokemon display */}
            </ul>
        </div>);
    }
});

var Filter = React.createClass({
    render: function() {
        return (<div id="filterBar">
            <label>Select Pokemon Type: </label>
            <select name="type" id="pokemonTypeFilter">
                <option value="">- ALL -</option>
                <option value="grass">grass</option>
                <option value="fire">fire</option>
                {/* ... */}
            </select>
            <label>Input Minimum Attack: </label><input type="text" id="pokemonAtkFilter"/>
        </div>);
    },
});

var Pokedex = React.createClass({
    render: function() {
        var filterPokemon = this.filterPokemonByTypeAndMinAtk(allPokemons, this.state.filterPokemonType, this.state.filterPokemonAtk);
        return (<div>
            <Filter />
            <Result />
        </div>);
    }
});

ReactDOM.render(<Pokedex />, document.getElementById('reactOutput')); // Render Pokdex component to html