How can I create a Cascading Async Select using @atlaskit/select?

Question

I started with React recently and I am trying to figure out how to create a Cascading Async Select (eg. Country > City) using @atlaskit/select.

Following the doc I use the option loadOptions in the first Async Select (Country) and onChange={({ label, value }) => handleCountryOptionChange(value)} to call the API that returns the Cities. The cities are defined as [cities, setCities] = useState(undefined) and the second Async Select (City) has the loadOptions = cities. The Cities options are displayed right in the console whenever you click on a different Country but they are not rendered.

Any idea or example about how to achieve this?

Answer 1

You are handling the fetch separately and loadOptions= expects a function so maybe try options=cities (instead of loadOptions) for your Cities select control.