title: How to Create 3(country,state and city) dropdowns that populates data with each other in react js
body: <p>I want to create 3 dropdowns such as country,state,city.Based on selection in country option it should populate the state and based on country and state selected option the city dropdown should populate itself in react js. Thanks in Advance</p>
  <p><strong>i want add more states here in the usa country</strong></p>
  <pre><code>  componentDidMount() {
      this.setState({
        countries: [
          {
            name: &quot;Germany&quot;,
            states: [
              {
                name: &quot;A&quot;,
                cities: [&quot;Duesseldorf&quot;, &quot;Leinfelden-Echterdingen&quot;, &quot;Eschborn&quot;]
              }
            ]
          },
          { name: &quot;Spain&quot;, states: [{ name: &quot;B&quot;, cities: [&quot;Barcelona&quot;] }] },
  
          { name: &quot;USA&quot;, states: [{ name: &quot;C&quot;, cities: [&quot;Downers Grove&quot;] }] },
          {
            name: &quot;Mexico&quot;,
            states: [{ name: [&quot;D&quot;, &quot;F&quot;, &quot;H&quot;], cities: [&quot;Puebla&quot;] }]
          },
          {
            name: &quot;India&quot;,
            states: [
              { name: &quot;E&quot;, cities: [&quot;Delhi&quot;, &quot;Kolkata&quot;, &quot;Mumbai&quot;, &quot;Bangalore&quot;] }
            ]
          }
        ]
      });
    }
  
    changeCountry(event) {
      this.setState({ selectedCountry: event.target.value });
      this.setState({
        states: this.state.countries.find(
          (cntry) =&gt; cntry.name === event.target.value
        ).states
      });
    }
  
    changeState(event) {
      this.setState({ selectedState: event.target.value });
      const stats = this.state.countries.find(
        (cntry) =&gt; cntry.name === this.state.selectedCountry
      ).states;
      this.setState({
        cities: stats.find((stat) =&gt; stat.name === event.target.value).cities
      });
    }
  </code></pre>
  <p>i want  to display more states and city in one country (3 dropdowns)</p>
  <pre><code>  render() {
      return (
        &lt;div id=&quot;container&quot;&gt;
          &lt;h2&gt;Cascading or Dependent Dropdown using React&lt;/h2&gt;
  
          &lt;div&gt;
            &lt;label&gt;Country&lt;/label&gt;
            &lt;select
              placeholder=&quot;Country&quot;
              value={this.state.selectedCountry}
              onChange={this.changeCountry}
            &gt;
              &lt;option&gt;--Choose Country--&lt;/option&gt;
              {this.state.countries.map((e, key) =&gt; {
                return &lt;option key={key}&gt;{e.name}&lt;/option&gt;;
              })}
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;label&gt;State&lt;/label&gt;
            &lt;select
              placeholder=&quot;State&quot;
              value={this.state.selectedState}
              onChange={this.changeState}
            &gt;
              &lt;option&gt;--Choose State--&lt;/option&gt;
              {this.state.states.map((e, key) =&gt; {
                return &lt;option key={key}&gt;{e.name}&lt;/option&gt;;
              })}
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;label&gt;City&lt;/label&gt;
            &lt;select placeholder=&quot;City&quot;&gt;
              &lt;option&gt;--Choose City--&lt;/option&gt;
              {this.state.cities.map((e, key) =&gt; {
                return &lt;option key={key}&gt;{e}&lt;/option&gt;;
              })}
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>