title: React Formik bind the external button click with onSubmit function in <Formik>
body: <p>I'm trying to submit the form by using the external buttons which are located outside of <code>&lt;Form&gt;</code> or <code>&lt;Formik&gt;</code> tags</p>
  
  <p>As shown in the following screenshot, my button is in Bootstrap > Modal Footer section and they are outside of form tag.  I'm trying to submit the form when the user clicks on the <code>Submit</code> button.</p>
  
  <p><a href="https://i.stack.imgur.com/ncuub.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ncuub.jpg" alt="enter image description here"></a></p>
  
  <p>Please see the similar code as the following.  I uploaded it onto <a href="https://codesandbox.io/s/jlx4vq1l9w" rel="noreferrer">CodeSandbox</a>.  </p>
  
  <pre><code>function App() {
        return (
          &lt;div className="App"&gt;
            &lt;Formik
              initialValues={{
                date: '10/03/2019',
                workoutType: "Running",
                calories: 300
              }}
              onSubmit={values =&gt; {
                console.log(values);
              }}
              render={({ values }) =&gt; {
                return (
                  &lt;React.Fragment&gt;
                    &lt;Form&gt;
                      Date: &lt;Field name="date" /&gt;
                      &lt;br /&gt;
                      Type: &lt;Field name="workoutType" /&gt;
                      &lt;br /&gt;                
                      Calories: &lt;Field name="calories" /&gt;
                      &lt;br /&gt;  
                      &lt;button type="submit"&gt;Submit&lt;/button&gt;
                    &lt;/Form&gt;
                    &lt;hr /&gt;
                    &lt;br /&gt;
                    &lt;button type="submit" onClick={() =&gt; this.props.onSubmit}&gt;
                      Button Outside Form
                    &lt;/button&gt;
                  &lt;/React.Fragment&gt;
                );
              }}
            /&gt;
          &lt;/div&gt;
        );
      }
  </code></pre>
  
  <p>Since the button is outside of the form, it doesn't trigger Submit behaviour and I don't know how to connect this button's action and <code>Formik OnSubmit</code> method.  If I moved that button inside form tag, it works as expected and I don't have to do anything special.</p>
  
  <p>I tried to follow this SO's post <a href="https://stackoverflow.com/questions/49525057/react-formik-use-submitform-outside-formik">React Formik use submitForm outside </a>.  But I really couldn't figure out how it works.</p>
  
  <p>I tried to bind the button click action like <code>onClick={() =&gt; this.props.onSubmit}</code> as mentioned in the post.  But it's not doing anything or showing any error.</p>
  
  <p>Could you please help me how I can bind the Submit button outside of the form with 'OnSubmit' function in Formik?</p>