ItSolutionStuff.com

React Multi Select Dropdown Example

By Hardik Savani • November 5, 2023
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...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

React Checkbox onchange | React Checkbox Example

Read Now →

React Radio Button onchange | React Radio Button Example

Read Now →

React Select Dropdown onchange | React Select Box Example

Read Now →

React Textarea onChange Example | React Textarea Tutorial

Read Now →

React Textbox onChange Example | React Text Input Tutorial

Read Now →

How to Get Current Date and Time in React?

Read Now →

How to Create Custom Component in React?

Read Now →

React Conditional Statements in Render Tutorial

Read Now →