Dynamic Dependent Dropdown in React JS

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

A cascading dropdown is a group of dropdowns where the value of one dropdown depends upon another dropdown value. Child dropdown values are populated based on the item selected in the parent dropdown.

In this populate dropdown based on another dropdown+react will show you how to create a dynamic cascading dependent country, state, city dropdown list using react js with the web apis.

Country State City Cascading Dependent Dropdown in React JS

Follow the below steps and implement dynamic cascading country state city dependent dropdown in react js using REST APIs:

• Step 1 – Create React App
• Step 2 – Install Axios and Bootstrap 4
• Step 3 – Create Cascading Dropdown Component
• Step 4 – Import Component in App.js
• Step 5 – Add Css

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

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

Step 2 – Install Axios and Bootstrap 4

Then execute the following command to install axios and boostrap 4 library into your react app:

npm install bootstrap --save

npm install axios --save

And import bootstrap.min.css file in src/App.js.

Recommended:-React JS Axios GET Request Example

Step 3 – Create Cascading Dropdown Component

visit the src directory of your react js app and create a cascading dependent dropdown component; which is named Cascading.js. And add the following code into it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

import React, {Component } from 'react' import axios from 'axios'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; 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

If you want to learn how to create country state city rest apis; So, You can checkout out how to create country state city rest api in node js express with MySQL database.     

[Window Title] Update Available [Main Instruction] A new version of Sublime Text is available, download now? [Download] [Cancel]

Step 4 – Import Component in App.js

import above created component like Cascading.js file in src/App.js file:

1 2 3 4 5 6 7 8 9 10 11 12

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;

Recommended:-React JS Axios File Upload Example

Step 5 – Add CSS

Now, open the app.css file and add the following CSS classes:

1 2 3 4 5 6 7 8 9 10 11

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

Conclusion

Cascading dropdown in react js; Through this tutorial, you have learned how to create a cascading dropdown or dependent country state city dropdown list in React JS using Web API.