Dependent Fields inside FieldArray (on Country/State selects example)

[zelid]

There are two selects inside FieldArray:

• Country:

const countries = [
  'No States Country 1',
  'No States Country 2',
  'With States Country 3',
] as const;

• State:

const states = ['State 1', 'State 2', 'State 3'] as const;

StackBlitz link to the demo:
https://stackblitz.com/edit/node-n5mjdj

State-select should be shown only when Country-select equals to 'With States Country 3'.

My first guess was to use Object.fromEntries(myFormContext.getValues())[`todos[${index}].country`] inside FieldArray but that value is updated only the first time Country-select changed and then unpredictably on other form-fields changes for unknown reason.

What is the right way to hide State-select depending on Country-select value inside each of FieldArray entries?

Update:

Finally got it working in https://stackblitz.com/edit/node-m71jxv

Please let me know if solution V1: https://stackblitz.com/edit/node-m71jxv (which seems to be working fine) is the right one to go.

Solved using:

// in Select.tsx

// get select value setter
const [_, setValue] = useControlField(name); 

// later react to select change in <select onChange=.... :
onChange={(e) => {
  setValue(e.target.value);
  validate();
}}

// then in form's `ArrayField` call 

const [selectedCountry] =  useControlField<Country>(`todos[${index}].country`, 'myForm1');

Initially I thought using Object.fromEntries(myFormContext.getValues())[ `todos[${index}].country ] gives the current value from Select because it did on the first Select change for some reason.