Cascading Dropdown in React

Today we will create a cascading dropdown in React. In other words, we can also say that the dependent dropdown.

What is cascading dropdown?

Cascading dropdown is nothing but a list of the dropdowns where the value of the one dropdown is depends upon another dropdown. So the child dropdown list is generated based on the selection of the parent dropdown.

Let’s create a React demo where we will use the sample JSON data to implement the cascading dropdown of the Country & Language where language list will be based on the selected country. You can also create an example of the Country, State and City dropdowns based on the given logic.

Steps to implement cascading dropdown in React

  1. Create a react app
  2. Add react-select npm package
  3. Use sample JSON data
  4. Add logic to implement cascading dropdown
  5. Output

1. Create a react app

First, we will have a sample react application so let’s create it using create-react-app. Run the following command to create an application.

Refer to the link for more information.

Create React Application

2. Add react-select npm package

Here, we will use the react-select npm package to integrate the dropdown. Following link will help you to integrate the dropdown.

Implement dropdown in ReactJS

3. Use sample JSON data

Let’s create a data.json file to manage the JSON data and import it for further use.

data.json

We will use this data to bind the dropdowns. One is country dropdown and another is a language dropdown. The language dropdown will be populated based on the selection of the country dropdown.

4. Add logic to implement cascading dropdown

Additionally, we will create two change events to capture the dropdown selection. Also use the useEffect to dynamically generate the link based on the country and lang selection.

App.js

5. Output

Run the project and check the output in the browser.

Output - Cascading Dropdown in React - Clue Mediator
Output – Cascading Dropdown in React – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

2 Responses

  1. Akshay says:

    Thanx for the awesome article

Leave a Reply

Your email address will not be published. Required fields are marked *