In the following component, the handleDropdownChange function does not set the state for "data" on the first change, it only sets it after the second change. For example, when I select 'Electronics', nothing happens. I then select 'Produce', and the page loads all 'Electronics' products.
export default class ProductList extends Component {
constructor(props){
super(props);
this.handleDropdownChange= this.handleDropdownChange.bind(this);
this.state = {
data: fulldata
};
}
handleDropdownChange(e){
e.preventDefault();
var filtered_data = fulldata.filter(prod => prod.category == e.target.value);
this.setState({ data:filtered_data })
}
render(){
return(
<div>Category</div>
<select id="filter-cat" onChange={this.handleDropdownChange}>
<option value="Apparel">Apparel</option>
<option value="Electronics">Electronics</option>
<option value="Produce">Produce</option>
</select>
{this.state.data}
);
}
}
The only thing that worked for me was found here:
setState doesn't update the state immediately
My updated method looks like this:
async handleDropdownChange(e){
e.preventDefault();
var filtered_data = fulldata.filter(prod => prod.category == e.target.value);
await this.setState({ data:filtered_data })
}
This feels hacky and I wish there was a better way, but for now this is only solution that works me.