title: React - Trigger form submit using useRef
body: <p>Good day, so I am trying to perform an intermediate function before a form action=&quot;POST&quot; takes place. Ive tried two things firstly onSubmit={functionName} but the form always performs the action even if in the onSubmit function I return false. Secondly ive been trying to useRef instead to dispatch the submit event programtically but nothing happens? I essentially have to do a server side call to get a config for the form values that gets posted, unfortunately the external API I use needs the form to be submitted in this way. Please any help would be greatly appreciated.</p>
  <p>Attempt 1:</p>
  <pre><code>const performSubmit =() =&gt; {
   //Using onSubmit and then only performing the return after the axios call is done
   axiosCallFunction.then((res) =&gt; {
     setConfig(res.data)
     return true
   }).catch((error)) =&gt; {
     //Dont submit form
     return false
   })
  }
  
  return (
  &lt;form name=&quot;form&quot; onSubmit={performSubmit} id=&quot;x1&quot; method=&quot;POST&quot; action=&quot;https://url.aspx&quot; target=&quot;_top&quot;&gt;
      &lt;input value={config.param}/&gt;
      &lt;button type=&quot;submit&quot;&gt; Submit&lt;/button&gt;
  &lt;/form&gt;)
  
  </code></pre>
  <p>Attempt 2</p>
  <pre><code>const formEl = useRef();
  
  const performSubmit =() =&gt; {
   //Currently not calling the submit on the form
   formEl.current.dispatchEvent(new Event(&quot;submit&quot;))
  }
  
  return (
  &lt;form name=&quot;form&quot; ref={formEl} id=&quot;x1&quot; method=&quot;POST&quot; action=&quot;https://url.aspx&quot; target=&quot;_top&quot;&gt;
      &lt;input value={config.param}/&gt;
      &lt;button onClick={performSubmit} /&gt;
  &lt;/form&gt;)
  </code></pre>
  <p>Essentially want to do some call to a server and get results back before I submit the form or perform the action for the form.</p>