title: Is it possible to use button click event to trigger form submit in React?
body: <p>Is it possible in React to use the click event on a regular button component to trigger the click of a hidden form submit button/submission of the form with all the form values and updated index intact?</p>
  
  <p>I have an application with a series of steps (like a wizard) and a form in each step that has its own hidden submit button. When <code>ButtonNext</code> (and <code>ButtonFinal</code> on the final step) are clicked, is there a way to trigger a click on the hidden form submit button so that <code>onSubmit</code> runs and the form values and index value are then sent to the <code>handleSubmit</code> function? </p>
  
  <p>I can probably access the hidden submit button with a <code>data-key</code> attribute.</p>
  
  <p>EDIT: <code>ButtonNext</code> and <code>ButtonFinal</code> are direct siblings of the form in the DOM and can't be added to the form.</p>
  
  <pre><code>import React, { useState } from 'react'
  import { Row, Col } from 'react-styled-flexboxgrid'
  import { Form, ButtonNext, ButtonPrevious, ButtonFinal } from './style'
  
  const Application = ({ steps }) =&gt; {
    const [currentStepNum, setCurrentStepNum] = useState(0)
    const [previousStepName, setPreviousStepName] = useState(steps[0].step_name)
    const [nextStepName, setNextStepName] = useState(steps[1].step_name)
    const [formValues, setFormValues] = useState(null)
  
    const handleSubmit = (values, step) =&gt; {
      setFormValues(values)
      setStep(step)
    }
  
    const handleClick = (event, step) =&gt; {
      event.preventDefault()
      setStep(step)
    }
  
    const setStep = step =&gt; {
      step = parseInt(step)
      setCurrentStepNum(step)
  
      if (step &gt; 0) {
        setPreviousStepName(steps[step - 1].step_name)
      }
  
      if (step &lt; steps.length - 1) {
        setNextStepName(steps[step + 1].step_name)
      }
    }
  
    return (
      &lt;&gt;
        &lt;div&gt;
          {steps.map((step, index) =&gt; {
            return (
              &lt;div key={index}&gt;
                {currentStepNum == index &amp;&amp; (
                  &lt;&gt;
                    {step.form.length &gt; 0 &amp;&amp; (
                      &lt;Form
                        action="/"
                        fields={fields}
                        onSubmit={(values) =&gt; {
                          handleSubmit(values, [index + 1])
                        }}
                      /&gt;
                    )}
                    {index &gt; 0 &amp;&amp; (
                      &lt;ButtonPrevious
                        onClick={event =&gt; {
                          handleClick(event, [index - 1])
                        }}
                      &gt;
                        Back to {previousStepName}
                      &lt;/ButtonPrevious&gt;
                    )}
                    {index &lt; steps.length - 1 &amp;&amp; (
                      &lt;ButtonNext
                        onClick={Trigger onSubmit here}
                      &gt;
                        Next: {nextStepName}
                      &lt;/ButtonNext&gt;
                    )}
                    {index == steps.length - 1 &amp;&amp; (
                      &lt;ButtonFinal
                       onClick={Trigger onSubmit here}
                      &gt;
                        FINAL SUBMIT BUTTON PLACEHOLDER
                      &lt;/ButtonFinal&gt;
                    )}
                  &lt;/&gt;
                )}
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default Application
  </code></pre>