Introduction

In this post I will show you an example on cascading or dependent dropdown using React JS. When you have a requirement for selecting dropdown values based on another dropdown values then you need to create such cascading or dependent dropdown. For example, in your application you need to select city based on state or country then you need to create such dependent dropdown.

Here I will create some dummy dataset for country, state and city and I will show in the dropdown with select/option tags.

The first dropdown will contain country names, the second dropdown will show state names based on the country name and finally third dropdown will show city names based on the state name from the second dropdown.

Prerequisites

Node v12.9.1/v14.15.5, Npm 6.10.2/6.14.11, React JS 16/17

How to create a React Application

Example

I will show you an example on cascading or dependent dropdown with select options for Country -> State -> City. So when you select Country you will corresponding States and when you select State you will get corresponding Cities.

Final Results

You will see the below page on the browser for the home page, where you will see three cascading dropdown as shown in the below image:

Selecting country dropdown’s value you will get state populated and selecting state dropdown value you will get city dropdown populated.

Create React Application

You may go through the tutorial how to create React application in Windows. The name of the application is react-dependent-dropdown.

Create Cascaded or Dependent Dropdowns

Now I will write the required code using React JS to build the cascaded or dependent dropdowns.

Generally I will write source code in JS files inside src directory under project root directory.

index.js

This file is the root file and it defines all paths or loads the file required to navigate once your application functionality is displayed on ReactJS UI.

In the below source code of index.js file, I have imported Dropdown which I will later define to create the dropdown functionality.

React 16:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Dropdown from './Dropdown';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
//serviceWorker.unregister();
serviceWorker.register();

React 17:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Dropdown from './Dropdown';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Dropdown />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Dropdown.js

Now I will create a file called Dropdown.js in the src folder for implementing the dependent dropdown functionalities.

You can read about componentDidMount().

In the constructor I have declared few variables, such as countries, states, cities with empty arrays.

Inside the componentDidMount() function, I catch the click event from the dropdown and accordingly I populate the child dropdown.

Inside the render() function I build the select/option tags to display the dropdowns and bind the UI events.

import React from 'react';

class Dropdown extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			countries : [],
			states : [],
			cities : [],
			selectedCountry : '--Choose Country--',
			selectedState : '--Choose State--'
		};
		this.changeCountry = this.changeCountry.bind(this);
		this.changeState = this.changeState.bind(this);
	}
  
	componentDidMount() {
		this.setState({
			countries : [
				{ name: 'Germany', states: [ {name: 'A', cities: ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn']} ] },
				{ name: 'Spain', states: [ {name: 'B', cities: ['Barcelona']} ] },
				{ name: 'USA', states: [ {name: 'C', cities: ['Downers Grove']} ] },
				{ name: 'Mexico', states: [ {name: 'D', cities: ['Puebla']} ] },
				{ name: 'India', states: [ {name: 'E', cities: ['Delhi', 'Kolkata', 'Mumbai', 'Bangalore']} ] },
			]
		});
	}
  
	changeCountry(event) {
		this.setState({selectedCountry: event.target.value});
		this.setState({states : this.state.countries.find(cntry => cntry.name === event.target.value).states});
	}

	changeState(event) {
		this.setState({selectedState: event.target.value});
		const stats = this.state.countries.find(cntry => cntry.name === this.state.selectedCountry).states;
		this.setState({cities : stats.find(stat => stat.name === event.target.value).cities});
	}
	
	render() {
		return (
			<div id="container">
				<h2>Cascading or Dependent Dropdown using React</h2>
	
				<div>
					<label>Country</label>
					<select placeholder="Country" value={this.state.selectedCountry} onChange={this.changeCountry}>
						<option>--Choose Country--</option>
						{this.state.countries.map((e, key) => {
							return <option key={key}>{e.name}</option>;
						})}
					</select>
				</div>

				<div>
					<label>State</label>
					<select placeholder="State" value={this.state.selectedState} onChange={this.changeState}>
						<option>--Choose State--</option>
						{this.state.states.map((e, key) => {
							return <option key={key}>{e.name}</option>;
						})}
					</select>
				</div>
				
				<div>
					<label>City</label>
					<select placeholder="City">
						<option>--Choose City--</option>
						{this.state.cities.map((e, key) => {
							return <option key={key}>{e}</option>;
						})}
					</select>
				</div>
			</div>
		)
	}
}

export default Dropdown;

That’s all about how to create dependent dropdowns or cascaded dropdowns in React framework.

Source Code

Download