There is a simple code:
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName", { required: true })} />
{errors.firstName?.type === 'required' && "First name is required"}
<input {...register("lastName", { required: true })} />
{errors.lastName && "Last name is required"}
<input type="submit" />
</form>
);
}
form the official React Hook Form page.
My question regards the code:
const { register, formState: { errors }, handleSubmit } = useForm();
from the example above. I understand that it's just the Object Destructuring on hook function assignment but how the formState: { errors } works there and what does it really does?
Nested destructuring:
function nested() {
return {
really: { nested: { object: 42 } },
};
}
const { really: { nested: { object } } } = nested();
console.log(object); // 42Note that you cannot use really or nested as identifiers, only object, because that's what's being extracted.
Suppose your userForm() function is defined as
function useForm() {
return {
formState: {
errors: {}
}
}
}
Then you may do something like
let { formState: { errors}} = useForm();
This is equallent to
let useFromResponse = userForm();
let errors = useFormResponse.formState.errors;
You are doing a nested destructing here and yaa once done you can use errors but not formState.