Реакция, отображение сообщения после отправки формы с реакцией

Question

Я использую форму реагирования и хотел бы показать сообщение пользователю после отправки формы. Я знаю, как сделать это с предупреждением, но хотел бы, чтобы это сообщение было в виде абзаца. После отправки поля должны быть снова пустыми.

Вот мой компонент формы:

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

Довольно просто: просто useState для отображения сообщения и reset API из hookForm для сброса формы:

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;