React hook form useFieldArray typescript error on input name

Question

I have written the following in typescript for a dynamic form

type FormData = {
    name: string,
    session: { name: string }[]
}

...

const { control, register, handleSubmit } = useForm<FormData>()
const { fields, insert, remove, move, append } = useFieldArray({
    control,
    name: "session",
    keyName: "id"
})

...

{
    fields.map((field, index) => {
        return <div key={field.id}>
            <div>
                <label>Session {index}</label>
                <input type={"text"} {...register(`session.${index}.name`)} />
            </div>
        </div>
    })
}

and I get the error at the part {...register(session.${index}.name)}

Argument of type 'string' is not assignable to parameter of type '"session" | "name" | session.${number} | session.${number}.name' ts(2345)

The error goes away when i dont pass in FormData

const { control, register, handleSubmit } = useForm()

NearHuscarl · Accepted Answer · 2021-04-12 13:52:53Z

2

in v7, register() accepts a literal (an exact string value) instead of a string. So change your code to:

<input type={"text"} {...register(`session.${index}.name` as const)} />

To avoid type widening. See const assertions.

Related question:

Argument of type 'string' is not assignable to parameter of type '`${string}` | `${string}.${string}` | `${string}.${number}`'

edited Apr 12, 2021 at 13:52

answered Apr 7, 2021 at 2:00

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React hook form useFieldArray typescript error on input name

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related