I'm building a contact form with react-hook-form and Typescript. Following official examples here, I've implemented all the fields but the multiple file field.
What type should I use for a multiple-file field?
import * as React from "react";
import { useForm } from "react-hook-form";
type FormData = {
firstName: string;
lastName: string;
files: // <--- this is the type I'm looking for
};
export default function App() {
const { register, setValue, handleSubmit, formState: { errors } } = useForm<FormData>();
const onSubmit = handleSubmit(data => console.log(data));
// firstName and lastName will have correct type
return (
<form onSubmit={onSubmit}>
<label>First Name</label>
<input {...register("firstName")} />
<label>Last Name</label>
<input {...register("lastName")} />
<label>Files</label>
<input type="file" multiple {...register("files")} />
<button
type="button"
onClick={() => {
setValue("lastName", "luo"); // ✅
setValue("firstName", true); // ❌: true is not string
errors.bill; // ❌: property bill does not exist
}}
>
SetValue
</button>
</form>
);
}