CODEWITHSUNDEEP
javascriptreactjsreact-select
andy
andy

Reputation: 53

Select Event not working after first time in React

I have a select filter menu which holds 5 different options.This event works fine when the page loads and also on refresh.When i try to select option continuously it is not filtering the content based on the option

part of the code is:

<div className="filter_role">Role{" "}<select 
                    defaultValue={this.state.role}
                    onChange={this.filterRole.bind(this)}
                    >
                    <option value="">All</option>
                    <option value="Batsman">Batsman</option>
                    <option value="Wk-Batsman">WK-Batsman</option>
                    <option value="Bowler">Bowler</option>
                    <option value="All-Rounder">All-Rounder</option>
                    </select>
 </div> 


 filterRole = (event) => {

    if(event.target.value === "") {
        this.setState({role:event.target.value, players: this.state.players})
    } else {
        this.setState({
            role: event.target.value,
            players: this.state.players.filter(player => player.role.indexOf(event.target.value)>=0)
        })
    }
    console.log(event.target.value)
}

What am i doing wrong here? can anyone please help me out.

Upvotes: 0

Views: 139

Answers (1)

maya_nk99
maya_nk99

Reputation: 502

I think you are filtering it the wrong way, it should be like:

this.state.players.filter(player => player.role.indexOf(event.target.value) < 0)

Upvotes: 1

Related Questions