How To Use Syncfusion Multiselect Dropdown In React Application

Introduction

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

Prerequisites

• Basic Knowledge of ReactJS
• Visual Studio Code
• Node and NPM installed
• Bootstrap

Create a React.js Project

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

npx create-react-app demolist

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

npm install @syncfusion/ej2-react-dropdowns

Now install Bootstrap by using the following command.

npm install bootstrap --save 

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

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

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

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.

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

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

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.

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

Summary

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