Introduction

In this article, we will learn how to add Syncfusion multiselect dropdown in Reactjs application.

Prerequisites

Create a React.js Project

Let's create a new React project by using the following command:

Code
npx create-react-app demolist

Open this project in Visual Studio Code and install Synfusion dropdown using following command

Code
npm install @syncfusion/ej2-react-dropdowns

Now install Bootstrap by using the following command.

Code
npm install bootstrap --save

Now, open the index.js file and add import Bootstrap.

JavaScript
import 'bootstrap/dist/css/bootstrap.min.css';

Now go to src folder and create a new component 'Multiselectdrop.js'. Add the following code to this component

JavaScript
import React, { Component } from 'react'
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as data from './dataSource.json';
export class MulitselectDrop extends Component {
    constructor() {
        super(...arguments);
        this.temp = 'empList';
        this.empList = data[this.temp];
        console.log(this.empList);
        this.fields = { text: 'Name', value: 'Id' };
        this.value = '100';
    }
    render() {
        return (
            <div class="container">
                <div class="row" className="hdr">
                    <div class="col-sm-12 btn btn-info">
                        How to Use Syncfusion Multiselect Dropdown in React applicatiom
                    </div>
                </div>
                <div class="form-group row" style={{ marginTop: "20px" }}>
                    <label class="control-label col-sm-2" for="email">Select Name:</label>
                    <div class="col-sm-4">
                        <MultiSelectComponent id="defaultelement" dataSource={this.empList} mode="Default" fields={this.fields} placeholder="Select Name" />
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>);
    }
}
export default MulitselectDrop

Add a reference of this component in app.js file

JavaScript
import logo from './logo.svg';
import './App.css';
import MulitselectDrop from './MulitselectDrop'
function App() {
  return (
    <div className="App">
      <MulitselectDrop></MulitselectDrop>
    </div>
  );
}
export default App;

Now create a JSON file named 'dataSource.json' and add following data in this file.

JavaScript
{
  "empList": [
    {
      "Id": "100",
      "Name": "Sanwar",
      "Age": "25",
      "Address": "Jaipur",
      "City": "Jaipur",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "2",
      "Name": "Nisha",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Jaipur",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "3",
      "Name": "David",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Jaipur",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "4",
      "Name": "Sam",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Jaipur",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "5",
      "Name": "Jyotsna",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Mumbai",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "6",
      "Name": "Sid",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Bangalore",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "7",
      "Name": "Chavi",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Noida",
      "Salary": "500000",
      "Department": "IT"
    },
    {
      "Id": "8",
      "Name": "Nisha",
      "Age": "25",
      "Address": "C-Scheme",
      "City": "Delhi",
      "Salary": "500000",
      "Department": "IT"
    }
  ]
}

Now, run the project by using 'npm start' command and check the result.

How to Use Syncfusion Multiselect Dropdown in React applicatiom

We also add grouping functionalities in the dropdown. add the following code in Multiselectdrop.js component.

JavaScript
import React, { Component } from 'react'
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as data from './dataSource.json';
export class MulitselectDrop extends Component {
    constructor() {
        super(...arguments);
        this.temp = 'playerData';
        this.playerList = data[this.temp];
        console.log(this.playerData);
        this.groupFields = { groupBy: 'Category', text: 'Name', value: 'Id' };
        this.value = '100';
    }
    render() {
        return (
            <div class="container">
                <div class="row" className="hdr">
                    <div class="col-sm-12 btn btn-info">
                        How to Add Grouping in Syncfusion Multiselect Dropdown in React applicatiom
                    </div>
                </div>
                <div class="form-group row" style={{ marginTop: "20px" }}>
                    <label class="control-label col-sm-2" for="email">Select Name:</label>
                    <div class="col-sm-4">
                        <MultiSelectComponent id="defaultelement" dataSource={this.playerList} mode="Default" fields={this.groupFields} placeholder="Select Name" />
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>);
    }
}
export default MulitselectDrop

Add some records in 'dataSource.json' file.

JavaScript
{
    "playerData": [{
        "Name": "Virat",
        "Category": "Batsman",
        "Id": "1"
    }, {
        "Name": "Chickpea",
        "Category": "Bowler",
        "Id": "2"
    }, {
        "Name": "Sachin",
        "Category": "Batsman",
        "Id": "3"
    }, {
        "Name": "Hyden",
        "Category": "Batsman",
        "Id": "4"
    }, {
        "Name": "S. Watson",
        "Category": "All-rounder",
        "Id": "5"
    }, {
        "Name": "Smith",
        "Category": "Batsman",
        "Id": "6"
    }, {
        "Name": "Lee",
        "Category": "Bowler",
        "Id": "7"
    }, {
        "Name": "Warne",
        "Category": "Bowler",
        "Id": "8"
    }, {
        "Name": "Pointing",
        "Category": "Batsman",
        "Id": "9"
    }, {
        "Name": "Kumble",
        "Category": "Batsman",
        "Id": "10"
    }, {
        "Name": "Kalis",
        "Category": "All-rounder",
        "Id": "11"
    }]
}

Now, run the project by using 'npm start' command and check the result.

How to Use Syncfusion Multiselect Dropdown in React applicatiom

Summary

In this article, we learned how to create a multiselect dropdown in Reactjs application.