I'm using a react-select drop down to allow users to choose multiple options between A, B and C. Currently this works on the UI but when an option is de-selected, it is not removed from the array. Can anyone give me hints as to how this is done? (Example, A, B, and C are selected, then A is unselected, how can A be removed from the array?)
var choice = [];
const choices = [
{value: 'a', label: 'a'},
{value: 'b', label: 'b'},
{value: 'c', label: 'c'},
];
handleChange = (selectedChoice) => {
this.setState({ selectedChoice });
for (var i =0; i < selectedChoice.length; i++) {
if (choice.indexOf(selectedChoice[i].value) == -1){
choice.push(selectedChoice[i].value);
}
}
}
Then, futher down in the code console.log(choice) is called, printing when a button is clicked. Followed by:
render(){
return (
<Div ClassName = "box">
<Select options = {choices}
isMulti
value = {this.state.selectedChoice}
onChange = {this.handleChange}
/> </Div> );}
Push and pop won't work as the option could be in the middle.