React-hook-form: Type 'T' is not assignable to type 'Path<TFieldValues>'

[perevezencev]

Hello everyone! I have a code like this:

import React from "react"
import { z } from "zod"
import { Control, Controller } from "react-hook-form" 

export const address = z.object({
    street: z.string(),
})

type FieldValues<TPrefix extends string> = {
    addresses: {
        [k in TPrefix]: z.infer<typeof address>
    }
}

export type AddressProperties<
    TFieldValues extends FieldValues<TPrefix>,
    TPrefix extends string = string,
> = {
    control: Control<TFieldValues>
    prefix: TPrefix
}

export function Address<TFieldValues extends FieldValues<TPrefix>, TPrefix extends string>(
    properties: AddressProperties<TFieldValues>,
) {
    const { control, prefix} = properties

    return <Controller 
        control={control} 
        // Type '`addresses.${string}.street`' is not assignable to type 'Path<TFieldValues>'
        name={`addresses.${prefix}.street`}
        render={() => <input />} 
     />
}

why name is not assignable to type Path<TFieldValues> and how can i fix this?

playground

[sujinleeme]

Hi, @perevezencev You'd like to give the generic type of form value object. The type definition is difficult to read and is complicated. We can make it simpler.

import React from 'react'
import { z } from "zod"
import { Control, Controller } from "react-hook-form" 

export const address = z.object({
    street: z.string(),
})

type FormValues<Prefix> = {
    [K in keyof Prefix | string]: z.infer<typeof address>
}

type AddressProperties<Prefix> = {
    control: Control<FormValues<Prefix>>, 
    prefix: Prefix
}

export function Address(
    properties: AddressProperties<'address-1' | 'address-2'>
) {
    const { control, prefix} = properties

    return <Controller 
        control={control} 
        name={`addresses.${prefix}.street`}
        render={() => <input />} 
     />
}

Playground