This form utilizes the react-bootstrap styling library. Strangely, when I place the submit button inside the form tag, it causes the app to break and restart. However, moving the button outside of the form tag resolves the issue. Can someone explain why this happens? I really want to keep the button inside the form for styling purposes.
<Form>
<Form.Row>
<Col xs={9}>
<Form.Group>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={this.state.username}
onChange={(event) => {
console.log(`${this.state.username}`);
this.setState({username: event.target.value});
}}
required
/>
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Col>
<Col>
<Button variant="primary"
type="submit"
onClick={() => {
try {
console.log("Submit button clicked");
} catch (error) {
console.log(error);
}
}}>
Submit
</Button>
</Col>
</Form.Row>
</Form>