How trigger AsyncSelect to reload options in ReactJS

Question

I have two AsyncSelect components to select a category and a subcategory. When we choose a category from the first AsyncSelect, I need to load it's sub-categories to the second one.

AsyncSelect loads the items when it gets mounted. But how can I trigger it programmatically (When I select the category from the first AsyncSelect) to load the data (The subcategories to the second AsyncSelect) when it is already mounted?

 <AsyncSelect
    cacheOptions
    loadOptions={this.loadSubCategories}
    defaultOptions
    onInputChange={this.handleInputChange}
 />

Answer 1

Add the key into your subCategories's asyncSelect.

<AsyncSelect
    key={this.state.categoryName}
    cacheOptions
    loadOptions={this.loadSubCategories}
    defaultOptions
    onInputChange={this.handleInputChange}
 />

When you select the category, please change the state.

this.setState({categoryName: "Different NAME HERE"})

Answer 2

No, you can not load on the basis of other triggers. as given in document: defaultOption

There are two valid values for defaultOptions property.

1)Providing an option array to this prop will populate the initial set of options (this does the job for categories) and

2) filtering the options (typing in the control). Providing the prop by itself (or with 'true') tells the control to immediately fire the remote request, (this is only happen in the same <AsyncSelect/>)

and your requirement is not meet to load <AsyncSelect/> for subcategory