React, Display message after submitting form with react-hook-form - reactjs

Question

I use react-hook-form and would like to display message to the user after submitting form. I know how to do that with alert, but would like to have that message as a paragraph. After submitting fields should be again empty.
Here is my Form component:
import React from "react";
import { useForm } from "react-hook-form";
const Form = ({ title }) => {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data, e) => {
e.preventDefault();
console.log(data);
alert(`thank you ${data.name} for your message`);
};
return (
<div className="formContainer">
<Title title="Lets stay in touch" />
<div className="form">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form__row">
<input
className={`inputForm ${errors.name ? "inputFormError" : ""}`}
name="name"
type="text"
placeholder="name"
ref={register({ required: true })}
/>
<input
className={`inputForm ${
errors.surname ? "inputFormError" : ""
}`}
name="surname"
type="text"
placeholder="surname"
ref={register({ required: true })}
/>
</div>
<div>
<textarea
className={`inputForm areaForm ${
errors.message ? "inputFormError" : ""
}`}
name="message"
placeholder="Your message"
ref={register({ required: true })}
></textarea>
</div>
<div>
<button className="form__formButton" type="submit">
Send
</button>
</div>
</form>
</div>
</div>
);
};
export default Form;

Answer 1

Pretty simple with just a useState to show the message and reset API from hookForm to reset the form :
import React from "react";
import { useForm } from "react-hook-form";
const Form = ({ title }) => {
const [message, setMessage] = useState('');
const { register, handleSubmit, errors, reset } = useForm();
const onSubmit = (data, e) => {
e.preventDefault();
console.log(data);
setMessage(`thank you ${data.name} for your message`);
reset();
};
return (
<div className="formContainer">
<Title title="Lets stay in touch" />
<div className="form">
{message}
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form__row">
<input
className={`inputForm ${errors.name ? "inputFormError" : ""}`}
name="name"
type="text"
placeholder="name"
ref={register({ required: true })}
/>
<input
className={`inputForm ${
errors.surname ? "inputFormError" : ""
}`}
name="surname"
type="text"
placeholder="surname"
ref={register({ required: true })}
/>
</div>
<div>
<textarea
className={`inputForm areaForm ${
errors.message ? "inputFormError" : ""
}`}
name="message"
placeholder="Your message"
ref={register({ required: true })}
></textarea>
</div>
<div>
<button className="form__formButton" type="submit">
Send
</button>
</div>
</form>
</div>
</div>
);
};
export default Form;