React Multi Select Dropdown Example

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