What is the most appropriate way of submitting the data?
react-hook-form provides internal mechanisms for that:
They use either action or onSubmit.
onSubmit fires before action is performed – form-submission-algorithm
- Validation is passed
useForm({resolver: yupResolver(schema)})
onSubmit is firedaction is performed
// Use action prop to make post submission with formData
<Form
action="/api"
control={control}
onSuccess={() => {
alert("Success")
}}
onError={() => {
alert("error")
}}
>
{" "}
<input {...register("name")} />
{isSubmitSuccessful && <p>Form submit successful.</p>}
{errors?.root?.server && <p>Form submit failed.</p>} <button>submit</button>
</Form>
// Manual form submission
<Form
onSubmit={async ({ formData, data, formDataJson, event }) => {
await fetch("api", {
method: "post",
body: formData,
})
}}
>
What is the most appropriate way of submitting the data?
react-hook-form provides internal mechanisms for that:
They use either
actionoronSubmit.onSubmitfires beforeactionis performed – form-submission-algorithmuseForm({resolver: yupResolver(schema)})onSubmitis firedactionis performedhttps://www.reddit.com/r/nextjs/comments/19djmty/what_is_the_difference_between_action_vs_onsubmit/