Update Component B when there’s an update in Component A

Solution for Update Component B when there’s an update in Component A
is Given Below:

I have a scenario where there are 2 Dropdowns (Inside a parent component), let them be named A and B.
When Dropdown-A is updated by the user, Dropdown-B’s options and selected value should also be changed.


State at T1

Options: [1,2]
Selected: 1
Options: [X,Y]
Selected: X

Now, user changed the value of Dropdown-A from let’s say 1 to 2

State at T2:

Options: [1,2]
Selected: 2
Options: [P,Q]
Selected: Q

Now the way I am trying to achieve this is, inside the onUpdate of Dropdown-A I am updating the “List of Options” and “selected value for Dropdown-B” in the state of the parent component (these values are then passed down to Dropdown-B as props).


Dropdown-B does not find the “Selected value” inside the “options” list which is passed.
Now the reason for this is the “new options list” is still getting passed down to the component but the “Selected value” prop has reached first. Hence it is not able to find the selected value inside the options-list.

and this leads to console error

How should I solve this?

P.s. I was thinking if some mechanism exists through which I can make sure that Dropdown-1 gets the Options-list prop first, renders/apply the logic and then the selected-value prop is sent

*** Code snippet ***

const optionsListFromDropdownB = useMemo(
  () => getCurrencies(currentMerchantAccount),
  [getCurrencies, currentMerchantAccount]

  onUpdate={(merchantAccountId): void => {
      // update dropdownBValue
  value={currentMerchantAccount} // this currentMerchantAccount gets updated by the Dropdown, using Form context