Sharing here what I learned and likes
// Write a function that takes an object as argument
// Somehow, the properties and keys of the object got mixed up
// Swap the Javascript object's key with its values and return the resulting object
function
myFunction ( obj )
{
return
}
// Write a function that takes an object (a) and a number (b) as arguments
// Multiply all values of 'a' by 'b'
// Return the resulting object
function myFunction( a, b )
{
return
}
// Write a function that takes an object (a) as argument
// Return the sum of all object values
function myFunction( a ) {
return
}
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.
Follow the below steps and implement dynamic cascading country state city dependent dropdown in react js using REST APIs:
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
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.
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]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; |
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; } |
