Implementing fields with selection dependent options and also loading selections from an API

[alainacook]

Hi all,

I am essentially trying to implement what is mentioned here: https://github.com/orgs/react-hook-form/discussions/2508, creating Country and State fields, and setting state options based on the Country selection. I am also loading previous selections from an API, and am clearing the State selection if the Country selection changes. The issue I am having is that if I load data from my API, it is being detected as a "change", and the State field is being cleared on initial render.

I'm detecting changes with watch and useEffect:

const countryValue = watch("Country");
const stateValue = watch("State");

useEffect(() => {
    resetField("State", { defaultValue: null });
    if (!countryValue) {
      setStateOptions([]);
    } else {
      if (countryValue === "US") {
        setStateOptions(["AL", "CA", "GA", "TX"]);
      } else if (countryValue === "CA") {
        setStateOptions(["AB", "BC", "FE"]);
      } else {
        setStateOptions([]);
      }
    }
  }, [resetField, countryValue]);

Reproduced the issue in code sandbox here: https://codesandbox.io/s/agitated-paper-47qmvk?file=/src/App.js

Any suggestions on how I can resolve this?

[leapful]

@alainacook

You can simplify the clear state handling by clear only for onChange of country field.

Working demo: https://codesandbox.io/s/heuristic-blackwell-r8cwcy?file=/src/App.js

[alainacook]

Ah, great. I didn't even think of this. Works like a charm, thank you!