React Multi Select Dropdown Example

By Hardik Savani | May 30, 2020 | Category : React JS


This tutorial is focused on multi select dropdown in react js example. we will help you to give example of react multiselect dropdown example. you can see react multiple select dropdown. step by step explain react multi select dropdown component. follow bellow step for how to use multi select dropdown in react js.

Sometime we need to add multiselect dropdown list for use choice like we can give option to choose for fruits that like user and he will select multiple from list. so if you need to add multiple select dropdown in react js then i will show how to can use multiple select dropdown in react.

In this example, 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.

So, let's see bellow preview and example code:

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 - ItSolutionStuff.com</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'));

I hope it can help you...



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: