Remove text from textarea after form submission React

Question

I have a form that is sending an email once user has clicked submit but the text is still staying in the text area. What can I do to clear the textarea once form has been submitted?

import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";

const Contact = () => {
  const formRef = useRef();
  const [done, setDone] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    emailjs
      .sendForm(
        "service_fh7vxks",
        "template_z5wczcw",
        formRef.current,
        "mhYkqvVVsQZ1u1ogA"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div className="c">
      <div className="c-bg"></div>
      <div className="c-wrapper">
        <div className="c-left">
          <h1 className="c-title">Let's talk</h1>
          <div className="c-info">
            <div className="c-info-item">
              <img src={phone} alt="" className="c-icon" />
              +61 490 522 328
            </div>
            <div className="c-info-item">
              <img src={email} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={resume} alt="" className="c-icon" />
              CV
            </div>
            <div className="c-info-item">
              <img src={github} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={link} alt="" className="c-icon" />
              
                linkedin.com/in/tobias-bedford
              </a>
            </div>
          </div>
        </div>
        <div className="c-right">
          <p className="c-description">
            <b>Who are you?</b> Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Vel provident ex quis adipisci quidem magni hic
            eos quae deleniti dignissimos sequi rerum nam atque reprehenderit
            et, odio ad? Aliquam, repellat.
          </p>
          <form ref={formRef} onSubmit={handleSubmit}>
            <input type="text" placeholder="name" name="user_name" />
            <input type="text" placeholder="subject" name="user_subject" />
            <input type="text" placeholder="email" name="user_email" />
            <textarea rows="5" placeholder="message" name="message"></textarea>
            <button>Submit</button>
            {done && "Thank you..."}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

I believe it could be possible through using setstate(), but though there is maybe an easier way built into React. Any help would be greatly appreciated.

Answer 1

Indeed, I would use useState for this. You can save a declare the value with a default message, use an onChange handler to update the value, then clear it after you submit the form.

  const [done, setDone] = useState(false);
  const [textMessage, setTextMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    emailjs
      .sendForm(
        "service_fh7vxks",
        "template_z5wczcw",
        formRef.current,
        "mhYkqvVVsQZ1u1ogA"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
          setTextMessage('');
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

const handleChange = (e) => {
     setTextMessage(e.target.value);
}

//...then in your form, use defaultValue and onChange:
<textarea rows="5" defaultValue={textMessage} //OR 
 value={textMessage} onChange={handleChange} placeholder="message" name="message"></textarea>

Answer 2

You may set a id for your form and reset it while submit success

//function
const handleSubmit = (event) => {
  document.getElementById('my_form').reset();
}

//form
<form id='my_form'>
   {--code here --}
</form>

if only clear for textarea and other remain you may try to set id for text area and do below in your submit function

//function
const handleSubmit = (event) => {
  document.getElementById('textarea_id').value = '';
}