Typescript: How to properly type setValue

[azban]

Hi, I was looking to create a wrapper function around setValue, but I can't figure out how to set up my generics to allow for setting a primitive value.

type FormInputs = {
  firstName: string;
  lastName: string;
}

const customSetValue = <T,>(
  inputName: Path<T>, 
  setValue: UseFormSetValue<T>,
) => {
  setValue(inputName, "string");
}

Argument of type 'string' is not assignable to parameter of type 'UnpackNestedValue<PathValue<T, Path<T>>>'.ts(2345)

Here's a super simple example of what I'm attempting to do: https://codesandbox.io/s/flamboyant-frog-dv8v1?file=/src/App.tsx

Is there a way to specify via generics that all values are string? Or for it to look up the value by the path?

[Joe312341]

Hey, there is an issue with path being able to properly use generics right now. I believe the RHF team is working on it, see #7215

[tommiCZE]

Hi i have same problem. Do u have some info about resolve this issue?

[azban]

nope, i had to use ts-ignore for now. was hoping #7215 would get merged, but looks like that was closed.

[Moshyfawn]

Take a look at the #7433 RHF V8 version changes. There will be a couple of Path changes that might be something that'll help

[tommiCZE]

Is know release date for RHF V8?

[Moshyfawn]

Is know release date for RHF V8?

@bluebill1049

[bluebill1049]

No ETA at the moment.

[os-freddyshim]

What is the status on this issue? I came across the same problem and error messages and was wondering if a fix has been deployed yet.

[Moshyfawn]

The v8 is still in progress. You can already try the v8.0.0-alpha.4. No ETA for the stable release, tho

For now, the only thing I was able to hack together is this:

import type {
  UseFormSetValue,
  FieldValues,
  FieldPath,
  FieldPathValue
} from "react-hook-form";
import { useEffect } from "react";

type InputProps<
  TFieldValues extends FieldValues,
  TFieldName extends FieldPath<TFieldValues>
> = {
  setValue: UseFormSetValue<TFieldValues>
  name: TFieldName
};

const Input = <
  TFieldValues extends FieldValues,
  TFieldName extends FieldPath<TFieldValues>
>({
  setValue,
  name
}: InputProps<TFieldValues, TFieldName>) => {
  setValue(name, "string" as FieldPathValue<TFieldValues, TFieldName>)
};

Here's a basic codesandbox

[os-freddyshim]

I was able to get rid of Typescript errors using your approach after changing the casting of the string value (ie. I had to change FieldPathValue<TFieldValues, TFieldName> to UnpackNestedValue<FieldPathValue<TFieldValues, TFieldName>>).

import {
  FieldValues,
  UseFormSetValue,
  FieldPath,
  FieldPathValue,
  UnpackNestedValue,
} from 'react-hook-form';

interface InputProps<T extends FieldValues> {
  name: FieldPath<T>;
  setValue: UseFormSetValue<T>;
}

const Input = <T extends FieldValues>({ name, setValue }: InputProps<T>) => {  
  setValue(
    name,
    'string' as UnpackNestedValue<FieldPathValue<T, FieldPath<T>>>
  );
};

export default Input;

[fresonn]

'UnpackNestedValue' is deprecated.

[fresonn]

setValue(name, value as PathValue<T, Path>)