how to set default value in select using react js

Question

I have two dropdown in my example with reset state (select bank select state).only first dropdown have data .When I changed first dropdown value then i fetch state data and show in dropdown . if i select YES BANK it show me select state .Now if I select any state example Delhi.then do something.But Now If I change again bank instead of yes bank example Axis bank state dropdown show Delhi why ? it show be reset and show select state ?

how to reset second dropdown (when first dropdown is change).here is my code

https://codesandbox.io/s/7wlwx2volq

Second dropdown always show select state with new data of bank,when user change bank name

 onChangeDropdown = e => {
    console.log(e.target.value);
    this.props.callbackFn(e.target.value);
  };

please explain

Answer 1

One possible solution is: Instead of using the selected property on options, use controlled component means use the value property of select field. Whenever any change happen to bank list, reset the value of state select filed value. Also define the value='' with default option.

Like this:

<select value={this.props.value} onChange={this.onChangeDropdown}>
    <option value='' disabled>
        {this.props.defaultOption}
    </option>

    {makeDropDown()}
</select>;

Pass value from parent component, like this:

<DropDown
    value={this.state.bankName}
    data={this.state.bankData}
    defaultOption="select Bank"
    callbackFn={this.callStateService}
/>
<DropDown
    value={this.state.stateName}
    data={this.state.stateData}
    defaultOption="select State"
    callbackFn={this.callDistrictService}
/>

Define onChange function for state select field change:

callDistrictService = value => {
    this.setState({ stateName: value });
}

Working Sandbox.