How to make react-hook-form work with multiple forms in one page?

To use multiple react-hook-form on one page, you will have to reuse with different names.

For a single form

const {register, handleSubmit, reset, formState: {errors}, watch} = useForm();

For multiple forms on one page

const {register: registerLogin, handleSubmit: handleSubmitLogin, reset: resetLogin, formState: { errors: errorsLogin}} = useForm();
const {register: registerChangePassword, handleSubmit: handleSubmitChangePassword, reset: resetChangePassword, formState: { errors: errorsChangePassword}, watch: watchChangePassword} = useForm();

const onSubmitLogin = (data) => {
    let bodyFormData = new FormData();
    for (let key in data) {
        bodyFormData.append(`${key}`, data[key])
    }
    callLoginApi(bodyFormData);
    resetLogin();
}

const onSubmitChangePassword = (data) => {
    let bodyFormData = new FormData();
    for (let key in data) {
        bodyFormData.append(`${key}`, data[key])
    }
    callChangePasswordApi(bodyFormData);
    resetChangePassword();
}

 

Form view should be something like below

<Form onSubmit={handleSubmitLogin(onSubmitLogin)}>
    <Form.Group className='form-group'>
        <Form.Control
            type='email'
            placeholder='Enter Email Address'
            {...registerLogin('email',
                {
                    required: 'Required',
                    maxLength: 80,
                    pattern: {
                        value: /^\S+@\S+.\S$/i,
                        message: 'Please enter a valid email address'
                    }
                }
            )}
        />
        {errorsLogin.email && <p>{errorsLogin.email.message}</p>}
    </Form.Group>
    <Form.Group className='form-group'>
        <Form.Control
            type='password'
            placeholder='Password'
            {...registerLogin('password',
                {
                    required: 'Password can not be blank',
                }
            )}
        />
        {errorsLogin.password && <p>{errorsLogin.password.message}</p>}
    </Form.Group>
</Form>

<div onClick={handleSubmitLogin(onSubmitLogin)}>
    <Button text={'Log in'} />
</div>

For a better explanation check this link solution.

Project Name: Evento Application