Hello Devs,
In this tutorial, we will learn React Multi Select Dropdown Example
In this section, we will take one categories array with "PHP", "Laravel" etc. and simply using map loop display dynamic multiple option. When user will select any option then we will store that info to "checkedItems" variable. after when you submit form then you can get selected option values.
Follow this step by step guide below.
Example Code:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
categories: [
{id: 1, value: "PHP"},
{id: 2, value: "Laravel"},
{id: 3, value: "Angular"},
{id: 4, value: "React"}
],
selCategories: 'php'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const selected=[];
let selectedOption=(event.target.selectedOptions);
for (let i = 0; i < selectedOption.length; i++){
selected.push(selectedOption.item(i).value)
}
this.setState({selCategories: selected});
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Select Dropdown onChange Example - rathorji.in</h1>
<form onSubmit={this.handleSubmit}>
<strong>Select Category:</strong>
<select multiple onChange={this.handleChange.bind(this)}>
{
this.state.categories.map(item => (
<option value={item.id}>{item.value}</option>
))
}
</select>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(, document.getElementById('root'));
May this example help you.