当第一个 select 选项更改时清除 select 框中的内容 - reactJS

Question

I am new to ReactJS . I have used AntJS select in my ReactJS project. I have two select in HTML . When the first select is selected, its relative dropdown will be loaded in the second select .

UI View:

When the user chooses the option in the first select , the second select will load its contents.

It was working great. Now my issue was " When I choose an option in second select , it is there in the second select box . But When I changed the option in the first select , the already chosen option in the second select is still there, but the drop-down content in the second select has changed.

My Issue in UI View: How to clear the selected content in the second select box when the first select option has changed". I have tried so far. I don't how to make it possible. Help me with some solutions.

Code:

WAAccountNameChange(value){  
        this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] }) 
    }

First Select:

<Select  " onChange= {(value) => { this.WAAccountNameChange(value)}} >
    {this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

Second Select:

<Select  defaultValue={this.state.selectedValue}  onChange= {(value) => { this.setState({ selectedValue: value })} } >
    {this.state.waWebsiteList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

Answer 1

On the change of first select menu clear the value of second select box. If you retrieve data from API than clear state on API success.