I get a "Type string is not assignable to never" Typescript error with the following application of
useForm
icw.
useFieldArray
:
type MyValues = {
vals: number[];
function MyForm() {
const { control } = useForm<MyValues>();
useFieldArray({ control, name: 'vals' });
See also: https://stackblitz.com/edit/react-ts-hqumgu
What is the correct type usage for useFieldArray
?
You can't do field arrays of non-object type, looking at useFieldArray
name
type; FieldValues
is Record<string, any>
export declare const useFieldArray: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends import("./types").ArrayPath<TFieldValues> = import("./types").ArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>) => UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;
So, you probably should do
type MyValues = {
vals: { value: number }[];
You can't do field arrays of non-object type, looking at useFieldArray
name
type; FieldValues
is Record<string, any>
export declare const useFieldArray: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends import("./types").ArrayPath<TFieldValues> = import("./types").ArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>) => UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;
So, you probably should do
type MyValues = {
vals: { value: number }[];
const Admin = () => {
const [files, setFiles] = useState([]);
const { register, control, handleSubmit, formState: { errors }} = useForm();
const { fields, remove, append } = useFieldArray(
control,
name: "variations",
I also tried this:
type FormValues = {
title: String;
sub_title: String;
slug: String;
short_description: String;
long_description: String;
dimensions: String;
weight: String;
stock: String;
imageUrl: String;
'name' gets error saying: Type '"variations"' is not assignable to type '"products"'.ts. The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<FormValues, "products", "id">'
I dont know what it means.
@Moshyfawn It worked! This is my final code. Is it ok how I did it?
type FormValues = {
products: {
title: String;
sub_title: String;
slug: String;
short_description: String;
long_description: String;
dimensions: String;
weight: String;
stock: String;
imageUrl: String;
variations: {
option_name: String;
option_sku: String;
option_qty: String;
const Admin = () => {
const [files, setFiles] = useState([]);
const {
register,
control,
handleSubmit,
formState: { errors },
} = useForm<FormValues>();
const { fields, append, remove } = useFieldArray<FormValues>({
control,
name: "variations",
@Moshyfawn just wondering about something you said "since RHF doesn't accept flat arrays (array of non-object types: string
, number
, etc.)"
So if I pass this type as my "", is wrong, right? :
short_description: string[];
In that case, I need to always make my type as follow? :
short_description: {
item: string;
just wondering because I then had to update my Mongoose DB schema from type to object[] and also my react .map() functions to render each item of short_description...
Couldnt find info about this in the RHF docs
Yep, RHF needs to store the id
field on the field's object
to track the fields in the array. So, the field's shape should be of type object
short_description: {
item: string
}[]
is correct
Ok thank you for clarifying, that is why it was complaining so much when I set it up as an Array, I re-configured my DB schema, now I think everything works fine. Do you recommend any available course on React-Hook-Form? I really want to learn it, just started with it but I have to improve my skills with RHF