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

Create a react app
Add react-select npm package
Use sample JSON data
Add logic to implement cascading dropdown
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.

npx create-react-app cascading-dropdown-react

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

[
  {
    "region": "India",
    "country_code": "in",
    "url": "google.co.in",
    "languages": [
      {
        "name": "English",
        "code": "en"
      },
      {
        "name": "Hindi",
        "code": "hi"
      }
    ]
  },
  {
    "region": "United Arab Emirates",
    "country_code": "ae",
    "url": "google.ae",
    "languages": [
      {
        "name": "Arabic",
        "code": "ar"
      },
      {
        "name": "English",
        "code": "en"
      }
    ]
  }
]

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

Now we will use the four different variables to manage the selected values.

country - To manage the selection of the country dropdown.
lang - To manage the selection of the language dropdown.
langList - Store the list of the languages based on the selected country.
link - Generate the link dynamically when both dropdowns are selected.

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

import React, { useState, useEffect } from "react";
import Select from "react-select";
import data from './data.json';

function App() {
  const [country, setCountry] = useState(null);
  const [lang, setLang] = useState(null);
  const [langList, setLangList] = useState([]);
  const [link, setLink] = useState("");

  // handle change event of the country dropdown
  const handleCountryChange = (obj) => {
    setCountry(obj);
    setLangList(obj.languages);
    setLang(null);
  };

  // handle change event of the language dropdown
  const handleLanguageChange = (obj) => {
    setLang(obj);
  };

  // generate the link when both dropdowns are selected
  useEffect(() => {
    if (country && lang) {
      setLink(`https://www.${country.url}/search?q=Clue+Mediator&gl=${country.country_code}&hl=${lang.code}`);
    }
  }, [country, lang]);

  return (
    <div class="App">
      <h3>Cascading dropdown in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <div 20="" style={{ width: 400, marginbottom: }}>
        <b>Country</b>
        <select placeholder="Select Country" value={country} options={data} onchange={handleCountryChange} getoptionlabel="{x" ==""> x.region}
          getOptionValue={x => x.country_code}
        />

        Language
        </select> x.name}
          getOptionValue={x => x.code}
        />
      </div>
      <span><b>Link:</b> {country && lang ? link : '-'}</span>
    </div>
  );
}

export default App;

5. Output

Run the project and check the output in the browser.

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