Accepted answer

You need to call fetchAccountDetails right after changing the state, for the function to invoke using the latest state that the dropdown has changed:

  dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
     this.setState(prevState => ({
      selectedAccount: data.value
     }), () => { this.fetchAccountDetails() });


the setState function is asynchronous, which means you need to take special precaution when updating state and expecting to use the updated value in the state synchronously. For this reason, the setState function has a second parameter which allows you to specify a callback which is executed when the state has actually been updated. This is where you would need to call the fetchAccountDetails function.

You can find the setState callback parameter described in the React docs here.

But you will have trouble compiling this either way. (a) Your interface should end each member declaration with a semicolon, not a comma. (b) You're missing a ")" on each line with a call to fetch. (c) In the fetchAccountDetails function you declare the URL variable, but then you pass a string 'URL' to the fetch function, not the variable.

Here is a working code sandbox showing the fix to your question, and the syntax fixes. I've commented out the calls to the fetch function since they will fail anyway.

Related Query

More Query from same tag