HDTuto.com

React JS Multiple Select Dropdown Example



Here, i will show you react multi select dropdown component. you can understand a concept of how to use multi select dropdown in react js. i would like to share with you multi select dropdown in react js example. In this article, we will implement a react multiselect dropdown example. Let's see bellow example react multiple select dropdown.

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 - HDTuto.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...




June 29, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.