I am new to React and coding in general, and I am trying to build this simple flashcard app to get a better understanding of react. I know this code is very bad and it should probably be broken into more components, but I can't figure out how to add an event handler to the submit button that will create a flashcard that will have the definition on one side and the term on the other and will make it so when the card is clicked it will change from definition to term. Any feedback is appreciated and I apologize in advance if this question is dumb.
class flashcard extends Component {
constructor(props) {
super(props);
this.state = {
definition: "",
term: "",
};
}
createCard = () => {
this.setState({
definition: "test",
});
};
render() {
return (
<div>
<Navbar bg="primary" variant="dark">
<Navbar.Brand>Flashcard</Navbar.Brand>
<Nav className="mr-auto">
<Button style={this.buttonstyles} variant="outline-light">
Add Card
</Button>
</Nav>
</Navbar>
<Card style={this.styles}>
<Card.Img variant="top" />
<Card.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>definition</Form.Label>
<Form.Control type="definition" placeholder="definition" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>term</Form.Label>
<Form.Control type="term" placeholder="term" />
</Form.Group>
<Button variant="primary" type="submit" onClick={this.createCard}>
Submit
</Button>
</Form>
</Card.Body>
</Card>
<Button style={this.previoussytle} variant="primary">
Previous
</Button>
<Button style={this.nextsytle} className="m-2" variant="primary">
Next
</Button>
</div>
);
}