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.

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.

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.

How to Use Syncfusion Multiselect Dropdown in React applicatiom

Summary

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