title: How can I submit a form every 10 seconds in React if it has events?
body: <p>So basically I have some input fields and I collect the data from a form submit ,but I have to click a button or to hit enter to submit the form. What I want is to submit the form every 10 seconds , so I tried to create a interval in a useEffect but it gives me an error , because e is not defined , yeah I have passed an event to the function</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const handleDataChange = useCallback((e) =&gt; {
      e.preventDefault();
      setUserData({
        ["job"] : e.target.elements.job.value ? e.target.elements.job.value : "",
        ["fName"] : e.target.elements.fName.value ? e.target.elements.fName.value : "",
        ["lName"] : e.target.elements.lName.value ? e.target.elements.lName.value : "",
        ["email"] : e.target.elements.email.value ? e.target.elements.email.value : "",
        ["phone"] : e.target.elements.phone.value ? e.target.elements.phone.value : "",
        ["country"] : e.target.elements.country.value ? e.target.elements.country.value : "",
        ["city"] : e.target.elements.city.value ? e.target.elements.city.value : "",
        ["pcode"] : e.target.elements.pcode.value ? e.target.elements.pcode.value : "",
        ["birth"] : e.target.elements.birth.value ? e.target.elements.birth.value : "",
        ["summary"]: summary ? summary : "",
        fireEmployment,
        fireEducation,
        fireLinks,
        fireSkills,
        fireLanguages
      })
    })
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        handleDataChange()
      }, 5000);
      return () =&gt; clearInterval(interval);
    }, [handleDataChange]);
  &lt;form className="user__infoTop" onSubmit={e =&gt; handleDataChange(e)}&gt;
            &lt;h1&gt;Personal Details&lt;/h1&gt;
            &lt;div className="user__infoRow"&gt;
              &lt;TextField variant="filled" type="text" label="Job Title" name="job" /&gt;
              &lt;div className="photo"&gt;
                &lt;label htmlFor="upload-photo"&gt;
                  &lt;Avatar src={img} alt="avatar" /&gt;
                  &lt;span&gt;
                    Upload &lt;CloudUploadIcon /&gt;
                  &lt;/span&gt;
                &lt;/label&gt;
                &lt;input
                  type="file"
                  id="upload-photo"
                  hidden
                  onChange={onFileChange}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="user__infoRow"&gt;
              &lt;TextField variant="filled" type="text" label="First Name" name="fname" /&gt;
              &lt;TextField variant="filled" type="text" label="Last Name" name="lname" /&gt;
            &lt;/div&gt;
            &lt;div className="user__infoRow"&gt;
              &lt;TextField variant="filled" type="email" label="email" name="email" /&gt;
              &lt;TextField variant="filled" type="text" label="Phone number" name="phone" /&gt;
            &lt;/div&gt;
            &lt;div className="user__infoRow"&gt;
              &lt;TextField variant="filled" type="text" label="Country" name="country" /&gt;
              &lt;TextField variant="filled" type="text" label="City" name="city" /&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>