Passing selected option value by user in remove button: React

Question

I have a react select form where user can either select multiple options or single option based on a condition.

I want to enable the user to select either single or multiple options and remove it from JS array backing in select.

However, I am unable to get the selected option by the user when the user clicks on the remove button

    //This is in my constructor
      this.state = {
          choices:["mango","apple","banana"]
        };

    //My remove choice function in React class
         removeChoice(e){
        let options = e.target.value;
        console.log(options);

        //code to remove selected options
       }

    //this is in my render function:
      let choiceItems = this.state.choices.map((item,i) =>{
            return (
                <option key={item+i}>{item}</option>
            )});

       return(
         ......//code here
         //this.props.multiSelect comes from a different component to allow/disallow user to select multiple options

         <select name="choices" size="3" multiple={this.props.multiSelect?true:false}>
                {choiceItems}
         </select>
         <button id="remove-choice"
            onClick={this.removeChoice} value={choiceItems}>Remove Choice</button>
       )

When I console options on remove function I get [Object, Object...]. Can anyone suggest an alternate approach to pass the values selected in {choiceItems} in the remove button?

Answer 1

if you want to select choices first and then delete them after the button is clicked, you need to save selected choices in state too. so the whole component would be like this:

class App extends React.Component {
  state = {
    choices: ["mango", "apple", "banana"],
    choicesForDelete: []
  };
  removeChoice = () => {
    const choices = this.state.choices.filter(
      choiceItem => !this.state.choicesForDelete.includes(choiceItem)
    );
    this.setState({ choices });
  };
  handleOptionClick = item => {
    let { choicesForDelete } = this.state;
    // checking if seleced choice exists in choicesForDelete
    const exists = choicesForDelete.includes(item);
    if (exists) {
      choicesForDelete = choicesForDelete.filter(choice => choice !== item);
    } else {
      choicesForDelete = [...choicesForDelete, item];
    }
    this.setState({ choicesForDelete });
  };
  render() {
    let choiceItems = this.state.choices.map((item, i) => {
      return (
        <option
          className={
            this.state.choicesForDelete.includes(item) ? "selected" : ""// check if choice is selected for styling purpose
          }
          key={item + i}
          onClick={() => this.handleOptionClick(item)}
        >
          {item}
        </option>
      );
    });
    return (
      <div>
        <select name="choices" size="3" multiple={!!this.props.multiSelect}>
          {choiceItems}
        </select>
        <button
          id="remove-choice"
          onClick={this.removeChoice}
          value={choiceItems}
        >
          Remove Choice
        </button>
      </div>
    );
  }
}

you can find the working example in https://codesandbox.io/s/magical-haze-jtgvj

just a side note: you can write your multiple logic like this:

          multiple={!!this.props.multiSelect}