title: why is submit onclick not working when its inside the form?
body: <p>This form uses react-bootstrap styling. The submit button breaks and restarts the app in this form. When I move the button outside of the form tag it works. What is the reason? I would like to keep the button in the form tag for styling.</p>
  
  <pre><code>       &lt;Form&gt;
            &lt;Form.Row&gt;
              &lt;Col xs={9}&gt;
              &lt;Form.Group&gt;
              &lt;InputGroup&gt;
                &lt;InputGroup.Prepend&gt;
                  &lt;InputGroup.Text id="inputGroupPrepend"&gt;@&lt;/InputGroup.Text&gt;
                &lt;/InputGroup.Prepend&gt;
                &lt;Form.Control
                  type="text"
                  placeholder="Username"
                  aria-describedby="inputGroupPrepend"
                  name="username"
                  value={this.state.username}
                  onChange={(event) =&gt; {
                    console.log(`${this.state.username}`);
                    this.setState({username: event.target.value});
                  }}
                  required
                /&gt;
                &lt;Form.Control.Feedback type="invalid"&gt;
                  Please choose a username.
                &lt;/Form.Control.Feedback&gt;
  
              &lt;/InputGroup&gt;
              &lt;/Form.Group&gt;
              &lt;/Col&gt;
              &lt;Col&gt;
              &lt;Button variant="primary" 
                      type="submit"
                      onClick={() =&gt; {
                        try {
                          console.log("Submit button clicked");
                        } catch (error) {
                          console.log(error);
                        }
                      }}&gt;
                Submit
              &lt;/Button&gt;
              &lt;/Col&gt;
            &lt;/Form.Row&gt;
          &lt;/Form&gt;
  </code></pre>