How to check which options in a multi-select input form are selected from ReactStrap

Question

I'm creating a form that has the option to select multiple values within a multiselect input, for filtering different options for a search. I'm using ReactStraps Form component .

The multiselect option is made up of an Input component, with multiple Option components like so:

  <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
  </Input>

I can't seem to find any value within the option to check if it's currently clicked, which leads me to my next question. Are reactstrap and bootstrap meant almost solely for looks and very basic functionality? If so, should I be setting up the functionality within my input to handle keeping track of whether it has been clicked or not?

Answer 1

you should handel in the 'onChange' event and set value. for example:

<Input type="select" name="selectMulti" id="exampleSelect" multiple value={this.state.StatusFilter} onChange={(event) => {this.onChangeMulti(event);}} >
                            <option value='Val1'>Val1</option>
                            <option value='Val2'>Val2</option>
                        </Input1>

and on event you should set

onChangeMulti = (event) => {
    let opts = [], opt;
    for (let i = 0, len = event.target.options.length; i < len; i++) {
        opt = event.target.options[i];
        if (opt.selected) {
            opts.push(opt.value);
        }
    }
    this.setState({ StatusFilter: opts });
}

Answer 2

So I switched to using a different component, but I assume that answer is the same for both. Essentially on the component, you set the onChange event to some function for handling your change and on that function pass in an event parameter. The event parameter will be whatever options are selected.

Code Example:

class FilterForm extends Component {
constructor(props) {
    super(props);

    this.state={
        filters:[],
        choiceValue:''
    };
    this.handleChange = this.handleChange.bind(this);

}


componentDidMount(){
    var filters=[];
    this.props.filters.forEach(function(item){
        filters.push({value:item,label:item});
    });
    this.setState({filters:filters.slice()});
}

handleChange(event){
//This will print all selected elements
    event.forEach(function(item){
        console.log(item)
    })
}


render() {
        return (
            <div>
                {<Select isMulti options={this.state.filters} onChange={this.handleChange}/>}
            </div>
        )
}

}