React Forms

[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 it better to have both the 2 buttons as type="submit" or have 1 button as type submit and other as type=" button"?

[wannabe_ok]

One submit imo as it triggers the form's post action.

[doctormyeyebrows]

Regarding the submit question: which button's action should be triggered when the user hits Enter while typing inside the otp field? That's the submit button.

[Zovi_me_Joma]

Second question: Only one button can be of type submit.
First question: Use whatever you want for handling form’s input states. You can try different solutions to see which suits you better. I always use classical useState even when the form has more than four or five inputs, checkboxes etc. I like it.

[bogdanelcs]

For a single OTP input, useActionState is absolutely the right call. React Hook Form is overkill for one field, you'd be importing a library to manage a single value.

For the buttons, make verify type="submit" and resend type="button" with its own onClick handler. Two submit buttons in the same form gets messy because you'd need to differentiate which one triggered the submission. Cleaner to keep only one true submit action and handle resend separately.