{{announcement.body}}
{{announcement.title}}

Create a Cascading Dropdown in ReactJS

DZone 's Guide to

Create a Cascading Dropdown in ReactJS

in this article, we discuss how to create a cascading dropdown in React with Web API in order to allow users to have filtered options in a form.

· Web Dev Zone ·
Free Resource

Introduction

In this article, we will learn how to create a cascading dropdown using ReactJS and Web API. A cascading dropdown is a group of dropdowns where the value of one dropdown depends upon another dropdown value. Child dropdown values are populated based on the item selected in the parent dropdown.

Prerequisites

  • We should have basic knowledge of React.js and Web API.
  • Visual Studio and Visual Studio Code IDE should be installed on your system.
  • SQL Server Management Studio.
  • Basic knowledge of Bootstrap and HTML.
You may also like: Everything React: Tutorials for Beginners and Experts Alike.

Create a Table in the Database

Open SQL Server Management Studio, create a database named "CascadingDemo", and in this database, create three tables and some demo data in the tables:

  1. Country.
  2. State.
  3. City.
SQL
 




x
78


 
1
USE [CascadingDemo]  
2
GO  
3
/****** Object:  Table [dbo].[City]    Script Date: 1/11/2020 5:56:32 PM ******/  
4
SET ANSI_NULLS ON  
5
GO  
6
SET QUOTED_IDENTIFIER ON  
7
GO  
8
CREATE TABLE [dbo].[City](  
9
    [CityId] [int] IDENTITY(1,1) NOT NULL,  
10
    [cityName] [varchar](50) NULL,  
11
    [StateId] [int] NULL,  
12
 CONSTRAINT [PK_City] PRIMARY KEY CLUSTERED   
13
(  
14
    [CityId] ASC  
15
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
16
) ON [PRIMARY]  
17
GO  
18
/****** Object:  Table [dbo].[Country]    Script Date: 1/11/2020 5:56:33 PM ******/  
19
SET ANSI_NULLS ON  
20
GO  
21
SET QUOTED_IDENTIFIER ON  
22
GO  
23
CREATE TABLE [dbo].[Country](  
24
    [CountryId] [int] IDENTITY(1,1) NOT NULL,  
25
    [CountryName] [varchar](50) NULL,  
26
PRIMARY KEY CLUSTERED   
27
(  
28
    [CountryId] ASC  
29
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
30
) ON [PRIMARY]  
31
GO  
32
/****** Object:  Table [dbo].[State]    Script Date: 1/11/2020 5:56:33 PM ******/  
33
SET ANSI_NULLS ON  
34
GO  
35
SET QUOTED_IDENTIFIER ON  
36
GO  
37
CREATE TABLE [dbo].[State](  
38
    [StateId] [int] IDENTITY(1,1) NOT NULL,  
39
    [StateName] [varchar](50) NULL,  
40
    [CountryId] [int] NULL,  
41
 CONSTRAINT [PK_State] PRIMARY KEY CLUSTERED   
42
(  
43
    [StateId] ASC  
44
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
45
) ON [PRIMARY]  
46
GO  
47
SET IDENTITY_INSERT [dbo].[City] ON   
48
  
49
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (1, N'Jaipur', 1)  
50
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (2, N'Jodhpur', 1)  
51
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (3, N'Noida', 4)  
52
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (4, N'Greater Noida', 4)  
53
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (5, N'Surat', 3)  
54
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (6, N'Vapi', 3)  
55
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (7, N'Mohali', 2)  
56
INSERT [dbo].[City] ([CityId], [cityName], [StateId]) VALUES (8, N'Chandigarh', 2)  
57
SET IDENTITY_INSERT [dbo].[City] OFF  
58
SET IDENTITY_INSERT [dbo].[Country] ON   
59
  
60
INSERT [dbo].[Country] ([CountryId], [CountryName]) VALUES (1, N'INDIA')  
61
INSERT [dbo].[Country] ([CountryId], [CountryName]) VALUES (2, N'AUSTRALIA')  
62
INSERT [dbo].[Country] ([CountryId], [CountryName]) VALUES (3, N'USA')  
63
SET IDENTITY_INSERT [dbo].[Country] OFF  
64
SET IDENTITY_INSERT [dbo].[State] ON   
65
  
66
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (1, N'Rajasthan', 1)  
67
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (2, N'Punjab', 1)  
68
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (3, N'Gujrat', 1)  
69
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (4, N'UttarPradesh', 1)  
70
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (5, N'New South Wales', 2)  
71
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (6, N'Queensland', 2)  
72
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (7, N'South Australia', 2)  
73
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (8, N'Tasmania', 2)  
74
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (9, N'Alabama', 3)  
75
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (10, N'California', 3)  
76
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (11, N'Idaho', 3)  
77
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (12, N'Louisiana', 3)  
78
SET IDENTITY_INSERT [dbo].[State] OFF



Create a New Web API Project

 Open Visual Studio and create a new project.

Creating a new project

Creating a new project

Change the name to CascadingDemo.  

Changing name to CascadingDemo

Creating a new project

Choose the template as Web API.  

Selecting template as Web API

Selecting template as Web API

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

Adding new data

Adding new data

Click on the "ADO.NET Entity Data Model" option and click "Add". 

Selecting "add"

Selecting "add"

Select EF Designer from the database and click the "Next" button. 

Selecting EF Designer

Selecting EF Designer

Add the connection properties and select database name on the next page and click OK. 

Adding connection properties

Adding connection properties

Check the "Table" checkbox. The internal options will be selected by default. Now, click OK

Checking table checkbox

Checking table checkbox

Now, our data model is successfully created.

Right-click on the Controllers folder and add a new controller. Name it "CascadingDemo controller" and add the following namespace in the CascadingDemo controller.

C#
 




xxxxxxxxxx
1


 
1
using CascadingDemo.Models;  



Now, add three methods to get country, state, and city data from the database.

C#
 




xxxxxxxxxx
1


 
1
[Route("Country")]  
2
       [HttpGet]  
3
       public object GetCountry()  
4
       {  
5
           return  DB.Countries.ToList();  
6
       }  



C#
 




xxxxxxxxxx
1


 
1
[Route("State")]  
2
       [HttpGet]  
3
       public object GetState(int CountryId)  
4
       {  
5
           return DB.States.Where(s => s.CountryId == CountryId).ToList();  
6
       }  



C#
 




xxxxxxxxxx
1


 
1
[Route("city")]  
2
        [HttpGet]  
3
        public object GetCity(int StateId)  
4
        {  
5
            return DB.Cities.Where(s => s.StateId == StateId).ToList();  
6
        }  



Complete CascadingDemo controller code  

C#
 




xxxxxxxxxx
1
34


 
1
using System;  
2
using System.Collections.Generic;  
3
using System.Linq;  
4
using System.Net;  
5
using System.Net.Http;  
6
using System.Web.Http;  
7
using CascadingDemo.Models;  
8
  
9
namespace CascadingDemo.Controllers  
10
{  
11
    [RoutePrefix("Api/cascading")]  
12
    public class CascadingController : ApiController  
13
    {  
14
        CascadingDemoEntities DB = new CascadingDemoEntities();  
15
        [Route("Country")]  
16
        [HttpGet]  
17
        public object GetCountry()  
18
        {  
19
            return  DB.Countries.ToList();  
20
        }  
21
        [Route("State")]  
22
        [HttpGet]  
23
        public object GetState(int CountryId)  
24
        {  
25
            return DB.States.Where(s => s.CountryId == CountryId).ToList();  
26
        }  
27
        [Route("city")]  
28
        [HttpGet]  
29
        public object GetCity(int StateId)  
30
        {  
31
            return DB.Cities.Where(s => s.StateId == StateId).ToList();  
32
        }  
33
    }  
34
}  



Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines. 

C#
 




xxxxxxxxxx
1


 
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");              
2
config.EnableCors(cors);  



Create a ReactJS Project

Now, let's first create a React application with the following command.

Shell
 




xxxxxxxxxx
1


 
1
npx create-react-app matform  



Install Bootstrap by using the following commands.  

Shell
 




xxxxxxxxxx
1


 
1
npm install --save bootstrap  



Open the index.js file and add import Bootstrap.

JavaScript
 




xxxxxxxxxx
1


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



Install the Axios library by using the following command. Learn more about Axios.

Java
 




xxxxxxxxxx
1


1
npm install --save axios    


 
Now go to the src folder and add a new component, named "Cascading.js", and add the following code.

Java
 




xxxxxxxxxx
1
75


1
import React, { Component } from 'react'  
2
import axios from 'axios';  
3
import ReactHTMLTableToExcel from 'react-html-table-to-excel';  
4
import './App.css';  
5
export class CascadingDropdown extends Component {  
6
        constructor(props) {  
7
                super(props)  
8
                this.state = {  
9
                        StateId:'',  
10
                        CountryId: '',  
11
                        CountryData: [],  
12
                        StateData: [],  
13
                        CityData: []  
14
                }  
15
        }  
16
        componentDidMount() {  
17
                axios.get('http://localhost:65173/Api/cascading/Country').then(response => {  
18
                        console.log(response.data);  
19
                        this.setState({  
20
                                CountryData: response.data  
21
                        });  
22
                });  
23
        }  
24
        ChangeteState = (e) => {  
25
                this.setState({ CountryId: e.target.value });  
26
                axios.get('http://localhost:65173/Api/cascading/State?CountryId=' +e.target.value ).then(response => {  
27
                        console.log(response.data);  
28
                        this.setState({  
29
                                StateData: response.data,  
30
                        });  
31
                });  
32
        }  
33
        ChangeCity = (e) => {  
34
                this.setState({ StateId: e.target.value });  
35
                axios.get('http://localhost:65173/Api/cascading/city?StateId=' + e.target.value).then(response => {  
36
                        console.log(response.data);  
37
                        this.setState({  
38
                                CityData: response.data  
39
                        });  
40
                });  
41
        }  
42
        render() {  
43
                return (  
44
                        <div>  
45
                                <div class="row" className="hdr">  
46
                                        <div class="col-sm-12 btn btn-info">  
47
                                                Cascading Dropdown in ReactJS  
48
                            </div>  
49
                                </div>  
50
                                <div className="form-group dropdn">  
51
                                        <select className="form-control" name="country" value={this.state.CountryId} onChange={this.ChangeteState}  >  
52
                                                <option>Select Country</option>  
53
                                                {this.state.CountryData.map((e, key) => {  
54
                                                        return <option key={key} value={e.CountryId}>{e.CountryName}</option>;  
55
                                                })}  
56
                                        </select>  
57
                                        <select className="form-control slct" name="state" value={this.state.StateId} onChange={this.ChangeCity} >  
58
                                        <label for="company">State Name</label>    
59
                                                {this.state.StateData.map((e, key) => {  
60
                                                        return <option key={key} value={e.StateId}>{e.StateName}</option>;  
61
                                                })}  
62
                                        </select>  
63
                                        <select className="form-control slct" name="city" value={this.state.CityData}  >  
64
                                          
65
                                                {this.state.CityData.map((e, key) => {  
66
                                                        return <option key={key} value={e.CityId}>{e.cityName}</option>;  
67
                                                })}  
68
                                        </select>  
69
                                </div>  
70
                      </div>  
71
                )  
72
        }  
73
}  
74
  
75
export default CascadingDropdown  


 

Add a reference of this component in your app.js file, and add the following code in the app.js file.

Java
 




xxxxxxxxxx
1
14


1
import React from 'react';  
2
import logo from './logo.svg';  
3
import './App.css';  
4
import CascadingDropdown from './Cascading'  
5
  
6
function App() {  
7
  return (  
8
    <div className="App">  
9
      <CascadingDropdown/>  
10
    </div>  
11
  );  
12
}  
13
  
14
export default App;  



Now, open the app.css file and add the following CSS classes:

CSS
 




xxxxxxxxxx
1
11


 
1
.dropdn  
2
{  
3
  margin-left: 250px;  
4
  margin-top: 20px;  
5
  margin-right: 250px;  
6
  padding: 30px;  
7
}  
8
.slct  
9
{  
10
  margin-top: 20px;  
11
}  



Now run the project and select country value from the country dropdown, based on country state dropdown filled in.

Selecting country from initial dropdown

Selecting country from initial dropdown

Now, select state and city in subsequent dropdowns. 

Selecting city and state

Selecting city and state

Summary

In this article, we learned how to create cascading dropdowns using ReactJS and Web API. Child dropdown values are populated based on the item selected in the parent dropdown.


Further Reading

Topics:
reactjs ,sql server ,webapi

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}