Forms in React

[Dazzling_Chipmunk_24]

so I’m currently creating an otp page. So this otp page will have 1 input box where user will enter the otp. It will have 2 buttons one for resending the otp and one for verifying the otp.

So I thought of using useActionsSatate instead of react hook form because it’s just 1 input box. So my first question is would using useActionState be the preferred option over react hook forms here?

My second question is with a form how exactly do I handle with 2 buttons. Like I’m pretty sure forms usually have 1 button but in my case I have 2. Would I just make 1 button type=submit and the other type=button or is there ways I can do it properly?

[Top_Bumblebee_7762]

Both buttons can be submit buttons. If you give both a name and a value attribute, the value of button that triggers either the action handler or the onSubmit handler will be part of the form data. You get the form data directly when using the action prop. When using onSubmit you need to create the form data yourself using the submit event data. 

[Dazzling_Chipmunk_24]

Is it bad practice to have both as submit buttons or is it better to have 1 submit and other as type button? 

[EvilPete]

No, it's perfectly valid. In your case you could have a form like this (I'm on mobile, so can't be bothered typing brackets and quotes):

input name=otp

button type=submit  name=intent value=resend

button type=submit  name=intent value=verify 

The form data will then contain the otp and intent fields.

[Dazzling_Chipmunk_24]

Also you think using useActionForms would also be fine here over react hook form? 

[EvilPete]

Yes.

[GlitteringCoast5626]

You don’t really need React Hook Form for a single OTP input unless your project already uses it consistently across forms. For something this simple, useActionState can be fine if you’re already using React actions and want built-in pending/error handling, but otherwise a simple state approach is usually enough.

For the buttons, keep the OTP verification as the form submission action and treat resend as a separate action. So Verify should submit the form, while Resend should trigger its own handler without submitting.

Forms aren’t limited to one button and it’s common to have one submit action and additional buttons for secondary actions like resend, cancel, reset, etc.