Multiple Dropdown in reactjs - reactjs

Question

I want to select multiple dropdown values in react js using Dynamic Values.
<Col lg="10">
<select id="facility_id" className="form-control select2" value={this.state.facility_id} onChange={this.handleChange} title="Type Growing system" isMulti>
<option value="0">None</option>
{this.state.facilities.map((faci, key) =>
<option key={key} value={faci.facility_id}>{faci.facility_name}</option>
)}
</select>
react-select is not working for me . Any other options available?

Answer 1

Use element attr multiple instead of isMulti.
Try something like this.
const Select = () => {
const [selections, setSelections] = React.useState(['b', 'c']);
const onSeletionChange = val => {
let sels = [...selections];
if (sels.includes(val)) {
sels = sels.filter(x => x !== val);
} else {
sels.push(val);
}
setSelections(sels);
}
return (
<div>
Multi Select (select again to remove)
<select
id="facility_id"
className="form-control select2"
value={selections}
onChange={(e) => {
console.log(e.target.value);
onSeletionChange(e.target.value);
}}
title="Type Growing system"
multiple
>
<option value="0" key="0">None</option>
{["a", "b", "c"].map((faci, key) => (
<option key={key} value={faci}>
{faci}
</option>
))}
</select>
</div>
);
};
const domContainer = document.querySelector('#app');
ReactDOM.render(<Select />, domContainer);
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<div id="app"> </div>