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

12 Responses

  1. Akshay says:

    Thanx for the awesome article

  2. Alex says:

    You saved my job!!!

  3. Temitayo says:

    Thanks alot for this. But how do I get the value of the selected option saved in a functional component.

    • Clue Mediator says:

      Hi Temitayo, Refer to the following article to get the selected value.

      How to get selected by only value in react-select

      • Temitayo says:

        Thanks.
        I was able to use filter or find to read through the json data but where the error actually lies is that I am trying to get the country and state in functional components (react hook form) and also save it using but it can’t get the exact value to be saved

        const onSubmit = data => {
        console.log(“dttta”, data)
        const newData = {
        …data,
        key: data.key,
        name: data.name,
        address: data.address,
        country: data.country.name,
        state: data.state.name
        }
        console.log(“NewData:”, newData)
        submitForm(newData)
        reset();
        }
        but I am getting error.
        Please any help

        • Clue Mediator says:

          Can you please post your error here? If possible then please replicate the issue/demo via Stackblitz or CodePen so I can easily fix it.

  4. Ponle Gwanmak Binde says:

    This helped alot. Thanks but I am having issues submitting the selected values in react hooks or in a functional component as when I console log, I can’t get the selected values.
    How do I go about it. Thanks

  5. Temitayo says:

    The link to stackblitz:
    https://react-ujf8yq.stackblitz.io

    I am actually trying to cascade drop down for Country, State and Region or LGA in react hooks and I don’t want to hard code the data but import data from data.json and also handle the submission of data selected to a table.

    Thank you

Leave a Reply

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