Dynamic Country State City Dependent Dropdown in React JS

In this tutorial, you will learn how to create a cascading dependent country state city dropdown list in React JS using Web/REST APIS.

Country State City Cascading Dependent Dropdown in React JS

Steps to create dynamic cascading country state city dependent dropdown in react js using REST APIs:

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

To start the React application:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Set Up Axios and Bootstrap

Run the following command to install axios and bootstrap library into your react app:

npm install bootstrap --save

npm install axios --save

Set up bootstrap.min.css file in src/App.js.

Step 3 – Create Cascading Dropdown Component

Create a Cascading Dependent Dropdown component called Cascading.js in the src directory, which will handle dynamic dependent dropdown data in it from the Web Rest API:

import React, {Component } from 'react'
import axios from 'axios';
import './App.css';
export class CascadingDropdown extends Component {
    constructor(props) {
        super(props)
        this.state = {
            StateId: '',
            CountryId: '',
            CountryData: [],
            StateData: [],
            CityData: []
        }
    }
    componentDidMount() {
        axios.get('http://localhost:3000/countries-list').then(response => {
            console.log(response.data);
            this.setState({
                CountryData: response.data
            });
        });
    }
    ChangeteState = (e) => {
        this.setState({
            CountryId: e.target.value
        });
        axios.get('http://localhost:3000/get-states-by-country?CountryId=' + e.target.value).then(response => {
            console.log(response.data);
            this.setState({
                StateData: response.data,
            });
        });
    }
    ChangeCity = (e) => {
        this.setState({
            StateId: e.target.value
        });
        axios.get('http://localhost:65173/get-cities-by-state?StateId=' + e.target.value).then(response => {
            console.log(response.data);
            this.setState({
                CityData: response.data
            });
        });
    }
   render() {  
        return (  
        <div>  
        <div class="row" className="hdr">  
            <div class="col-sm-12 btn btn-info">  
                    Cascading Dropdown in ReactJS  
        </div>  
        </div>  
        <div className="form-group dropdn">  
            <select className="form-control" name="country" value={this.state.CountryId} onChange={this.ChangeteState}  >  
                    <option>Select Country</option>  
                    {this.state.CountryData.map((e, key) => {  
                            return <option key={key} value={e.CountryId}>{e.CountryName}</option>;  
                    })}  
            </select>  
            <select className="form-control slct" name="state" value={this.state.StateId} onChange={this.ChangeCity} >  
            <label for="company">State Name</label>    
                    {this.state.StateData.map((e, key) => {  
                            return <option key={key} value={e.StateId}>{e.StateName}</option>;  
                    })}  
            </select>  
            <select className="form-control slct" name="city" value={this.state.CityData}  >  
              
                    {this.state.CityData.map((e, key) => {  
                            return <option key={key} value={e.CityId}>{e.cityName}</option>;  
                    })}  
            </select>  
        </div>  
        </div>  
        )  
   }  
}  
export default CascadingDropdown  

Step 4 – Import Component in App.js

import Cascading.js file component in src/App.js file:

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import CascadingDropdown from './Cascading'  
function App() {  
  return (  
    <div className="App">  
      <CascadingDropdown/>  
    </div>  
  );  
}  
export default App; 

Step 5 – Add CSS

Edit app.css file and add the following CSS classes:

.dropdn  
{  
  margin-left: 250px;  
  margin-top: 20px;  
  margin-right: 250px;  
  padding: 30px;  
}  
.slct  
{  
  margin-top: 20px;  
} 

Conclusion

That’s it, you have learned how to create a cascading dropdown or dependent country state city dropdown list in React JS using Web API.

Recommended React JS Tutorials