How to create generic type for Control, UseFormSetValue that work.

[Junaid300]

I have a common field that is going to use in multiple form . I want to avoid duplication and will to use that common field in my multiple component. I want to create generic that accept control and setValue of different kind of form.
For example i have country listing Select field. Two forms that is for profile and Post , in these two form i gonna use Country select field ,
Now i have two different forms and in these form i have different control and setValues. How can i give type to props of Country Select Field that will able to accept props from both forms and will able to set of get value.
Mainly i want to know how can i give type for a common field that gonna use in different kind of forms.

[Moshyfawn]

Take a look at #8618 to see if it's what you're after

[Junaid300]

Sorry brother, i am not sure about it.

[ocruze]

Have you guys found any solution? I have the same problem :(

[Junaid300]

This is how i was able to solve this problem
Here is my Generic Type

type NetworkCountriesFieldProps<T extends FieldValues> = {
  control: Control<T>;
  setValue: UseFormSetValue<T>;
  watchKey: Path<T>;
  stateWatchKey?: Path<T>;
  documentWatchKey?: Path<T>
};

Here is my component that is using generic type

  control,
  setValue,
  watchKey,
  stateWatchKey,
  documentWatchKey,
  
}: NetworkCountriesFieldProps<T>) {
return(
 <CountryStatesSidebar
    countries={CountriesList}
    selectedCountries={countries}
    selectedStates={states}
    onConfirm={(countries: SelectedCountry[], states?: SelectedState[]) => {
    setValue(watchKey, countries as PathValue<T, Path<T>>, { shouldDirty: true });
    setValue(stateWatchKey as Path<T>, states as PathValue<T, Path<T>>, { shouldDirty: true });
    setCountryToggle(false);
    }}
     onCancel={() => setCountryToggle(false)}
 />
)
}

This is how i used the generic type

 <NetworkCountriesField<AddNewNetworkFormType>
    control={control}
    setValue={setValue} />

[ocruze]

Thank you for your reply. But I'm actually looking for a way to avoid as PathValue<T, Path<T>> everywhere. If anyone finds a way to do this, please let me know.

[Junaid300]

I was unable to find any alternate solution. And i completed my implementation with this solution

[aspirisen]

Hi, I created a PR that demonstrates a Lens approach for building reusable components with TypeScript support #12284