Only one form submitting correctly with react hooks - reactjs

Question

I have a main App component that has a form and another component that also renders a separate form. I want the second form to submit correctly using its separate handleSecondSubmit function, but it does not seem to use it.
Here's the full code and a StackBlitz: Stackblitz Demo
import React from "react";
import { useForm } from "react-hook-form";
const SecondForm = () => {
const { handleSubmit, register } = useForm();
const handleSecondSubmit = e => {
e.preventDefault();
console.log("2nd form");
};
return (
<form onSubmit={e => handleSubmit(handleSecondSubmit)}>
<input name="test" type="text" ref={register({ required: true })} />
<input type="submit" />
</form>
);
};
const App = () => {
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example"));
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<input name="example" defaultValue="test" ref={register} />
<input name="exampleRequired" ref={register({ required: true })} />
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
<SecondForm />
</>
);
};
export default App;
Can someone explain what's happening here? Thank you

Answer 1

You need to call the handleSubmit directly when applying the handler, and the signature for the returned function has the event as the second argument (the first being the data)
const SecondForm = () => {
const { handleSubmit, register } = useForm();
const handleSecondSubmit = (data, e) => {
e.preventDefault();
console.log("2nd form", data);
};
return (
<form onSubmit={handleSubmit(handleSecondSubmit)}>
<input name="test" type="text" ref={register({ required: true })} />
<input type="submit" />
</form>
);
};
https://stackblitz.com/edit/react-v7cdfh

Answer 2

try this :
return (
<form onSubmit={e => handleSubmit(handleSecondSubmit(e))}>
<input name="test" type="text" ref={register({ required: true })} />
<input type="submit" />
</form>
);
};
you forgot to pass e to handleSecondSubmit(e)

Answer 3

Seems you need to pass the onSubmit event object through to your second form's handler.
onSubmit={e => handleSubmit(handleSecondSubmit(e))}
https://stackblitz.com/edit/react-fduvdv