ReactJs : How to have a default value selected in the RegionDropdown

Question

ReactJs : How to have a default value selected in the RegionDropdown.

I am using "react-country-region-selector" where two components "CountryDropdown" and "RegionDropdown" are there. Now in the constructor i have selected the default value "CountryDropdown". But my requirement is when ever i select any value from country list the regionDropdown will be populated with the default value with the first name in the list.

Here is the code i tried: step 1: imported the react-country-region-selector

step 2: used those component in my code.

And in the constructor i set the initial value of country country: 'United States'

Here is the link i have gone through :

https://www.npmjs.com/package/react-country-region-selector#demo

import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';



<tr>
     <td><label><CountryDropdown value={this.state.country}                        
                  onChange={(val) => this.selectCountry(val)} />
          </label>
     </td>
     <td><label><RegionDropdown country={this.state.country} 
         value={this.state.region}onChange={(val) => this.selectRegion(val)}/> 
         </label>
     </td>
</tr>

    selectCountry (val) {
        this.setState({ country: val });
    }

    selectRegion (val) {
        this.setState({ region: val });
    }

//And in the constructor i set the initial value of country 
 country: 'United States'

What i expect is the "RegionDropdown " will always appear with the first value in the list by default. eg : while rendering it will be "Alabama" as default country is "US".

Answer 1

From th docs ,

Whether you want to show a default option. This is what the user sees in the region dropdown after selecting a country.

For your requirement,

What i expect is the "RegionDropdown " will always appear with the first value in the list by default.

You need to set this on RegionDropdown ,

showDefaultOption={false}

---

CountryRegionData is by default available to use, when you install react-country-region-selector using,

npm i react-country-region-selector
yarn add react-country-region-selector

This is my code which is working fine,

import React, { Component } from "react";
import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';

class App extends Component {
    constructor(props) {
      super(props);
      this.state = { country: 'United States', region: '' };
    }

    selectCountry(val) {
        this.setState({ country: val });
    }

    selectRegion(val) {
        this.setState({ region: val });
    }

    render() {
      const { country, region } = this.state;
        return (
          <div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <label>
                      <CountryDropdown 
                        value={this.state.country}                        
                        onChange={(val) => this.selectCountry(val)} />
                    </label>
                  </td>
                  <td>
                    <label>
                      <RegionDropdown 
                        country={this.state.country} 
                        value={this.state.region}
                        onChange={(val) => this.selectRegion(val)} 
                        showDefaultOption={false}/> //To see first option by default
                    </label>
                  </td>
              </tr>
              </tbody>
            </table>
          </div>
        );
    }
}

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

---

Note: If you are not able to see RegionDropdown after selecting CountryDropdown then you must try to re-install react-country-region-selector . CountryRegionData is by default available. You can always confirm if data is available or not using console.log(CountryRegionData) after your import statement.