title: React Hook Form: How to reset the form content after submission
body: <p>I have a hidden field when you clicked the YES option, I want to reset the form to hide again the field after successful submission.</p>
  <p>Below is my code and here is the <a href="https://codesandbox.io/s/react-hook-form-using-emailjs-2-m5bxm" rel="nofollow noreferrer">link</a> to sandbox.</p>
  <pre><code>import { React, useState } from &quot;react&quot;;
  import emailjs from &quot;emailjs-com&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  const NameForm = () =&gt; {
    const [showYes, setShowYes] = useState(false);
    const {
      register,
      handleSubmit,
      reset,
      formState: { errors }
    } = useForm({
      defaultValues: { yes_no: false, yes_i_understand: false }
    });
    const sendEmail = formData =&gt; {
      emailjs
        .send(&quot;YOUR_SERVICE_ID&quot;, &quot;YOUR_TEMPLATE_ID&quot;, formData, &quot;YOUR_USER_ID&quot;)
        .then(
          result =&gt; {
            console.log(result.text);
          },
          error =&gt; {
            console.log(error.text);
          }
        );
      reset();
    };
  
    return (
      &lt;div&gt;
        &lt;h1 className=&quot;text-center text-md-left mb-3&quot;&gt;Get in Touch&lt;/h1&gt;
        &lt;p&gt;Have you spoken to a us in the last 14 days?&lt;/p&gt;
        &lt;form className=&quot;contact-form&quot; onSubmit={handleSubmit(sendEmail)}&gt;
          &lt;div className=&quot;mb-2&quot;&gt;
            &lt;div className=&quot;form-check form-check-inline&quot;&gt;
              &lt;input
                className=&quot;form-check-input&quot;
                type=&quot;radio&quot;
                value=&quot;Yes&quot;
                id=&quot;yes&quot;
                name=&quot;yes_no&quot;
                onClick={setShowYes}
              /&gt;
              &lt;label className=&quot;form-check-label mr-4&quot; htmlFor=&quot;yes&quot;&gt;
                Yes
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div className=&quot;form-check form-check-inline&quot;&gt;
              &lt;input
                className=&quot;form-check-input&quot;
                type=&quot;radio&quot;
                value=&quot;No&quot;
                id=&quot;no&quot;
                name=&quot;yes_no&quot;
                defaultChecked
                onClick={() =&gt; setShowYes(false)}
              /&gt;
              &lt;label className=&quot;form-check-label mr-4&quot; htmlFor=&quot;no&quot;&gt;
                No
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          {showYes &amp;&amp; (
            &lt;div className=&quot;form-group row mb-0&quot;&gt;
              &lt;div className=&quot;col-12 py-3&quot;&gt;
                &lt;input
                  type=&quot;text&quot;
                  className=&quot;form-control custom--fields-mod text-the-primary&quot;
                  id=&quot;agentName&quot;
                  placeholder=&quot;Agent Name *&quot;
                  name=&quot;agent_name&quot;
                  {...register(&quot;agent_name&quot;, { required: true })}
                /&gt;
                {errors.agent_name &amp;&amp; (
                  &lt;span className=&quot;invalid-feedback d-block&quot;&gt;
                    Please fill out this field.
                  &lt;/span&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
          )}
          &lt;div className=&quot;form-group mb-0 py-3&quot;&gt;
            &lt;textarea
              className=&quot;form-control custom--fields-mod text-the-primary&quot;
              id=&quot;message&quot;
              rows=&quot;3&quot;
              placeholder=&quot;Message *&quot;
              name=&quot;message&quot;
              {...register(&quot;message&quot;, { required: true })}
            &gt;&lt;/textarea&gt;
            {errors.message &amp;&amp; (
              &lt;span className=&quot;invalid-feedback d-block&quot;&gt;
                Please fill out this field.
              &lt;/span&gt;
            )}
          &lt;/div&gt;
          &lt;div className=&quot;form-group row py-2 mb-0&quot;&gt;
            &lt;div className=&quot;col-12 text-center text-md-left py-2 py-md-0&quot;&gt;
              &lt;input
                className=&quot;buttons-width float-md-right btn btn-dark-moderate-orange rounded-0&quot;
                type=&quot;submit&quot;
                value=&quot;SEND MESSAGE&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  export default NameForm;
  </code></pre>
  <p>I'm not sure if I missed something on passing the data to the form. I also put <code>defaultChecked</code> attribute in option NO.</p>