I'm learning react and trying to update the state/selected value of a react-select drop down via a button. When the button is clicked, buttonClick() function is called to set the new state value but react-select state didn't change. Selected label in the drop down stayed the same. How do I change the state of react-select so that it display the new selected value? Thanks.
2 Answers
react-select expects the selection value object to be one of the options passed as options
so you need to keep track of selected value in a state and pass it to the component
Also check the logic in button click to get the option and set it.
import React, { Component } from "react";
import Select from "react-select";
import axios from "axios";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: {},
selectOptions: []
};
}
async getOptions() {
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
const data = res.data;
const options = data.map((d) => ({
value: d.id,
label: d.name
}));
this.setState({ selectOptions: options });
}
handleChange(e) {
console.log(e);
this.setState({ selectedValue: e });
}
componentDidMount() {
this.getOptions();
}
buttonClick = () => {
const valueToSet = this.state.selectOptions.find((row) => {
return row.value === 2 && row.label === "Ervin Howell";
});
if (valueToSet) {
this.handleChange(valueToSet);
}
};
render() {
const { selectedValue = {} } = this.state;
console.log(this.state.selectOptions);
return (
<div>
<Select
value={selectedValue}
options={this.state.selectOptions}
onChange={this.handleChange.bind(this)}
/>
<p>
You have selected <strong>{selectedValue.label}</strong> whose id is{" "}
<strong>{selectedValue.value}</strong>
</p>
<button onClick={this.buttonClick}>Click</button>
</div>
);
}
}Actually handleChanges e parameter is the selected options's event not the object that you want to send it in buttonClicks event:
handleChange(e) {//e is the event not the object!
console.log(e);
this.setState({ id: e.value, name: e.label });
}
buttonClick = () => {
this.handleChange({ value: 2, label: "Ervin Howell" });// you can't pass object as the parameter
};
Also for the selected value on the button click you can do this:
<Select
value={{ id: this.state.id, label: this.state.name }}
options={this.state.selectOptions}
onChange={this.handleChange.bind(this)}
/>
Related