Whenever the button is clicked, my intention is for a modal to open. I have written the code for it, but I'm encountering errors that I can't seem to resolve. Here's the snippet of my code:
import React from "react";
import {
Modal,
Button,
Card,
CardHeader,
CardBody,
CardTitle,
CardFooter,
Table,
Row,
ButtonGroup,
Col,
} from "reactstrap";
function Table() {
state = {
isOpen: false
};
openModal = () => this.setState({ isOpen: true });
closeModal = () => this.setState({ isOpen: false });
return (
<>
<div className="contentGroup">
<Row>
<Col md="12">
<Card>
<CardHeader>
<ButtonGroup style={{float: 'right'}}>
<Button className="btn-round btn-icon" color="blue" onClick={this.openModal} style={{float: 'right'}}>
<i className="icon-plus-add"/>
</Button>
</ButtonGroup>
</CardHeader>
...
</Card>
<Modal show={this.state.isOpen} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Modal text</Modal.Body>
<Modal.Footer>
<Button color="info" onClick={this.closeModal}>
Close
</Button>
</Modal.Footer>
</Modal>
</Col>
</Row>
</div>
</>
);
}
export default Table;
The console is displaying the following errors:
'state' is not defined no-undef
'openModal' is not defined no-undef
'closeModal' is not defined no-undef
I am unsure why these errors are occurring. Any assistance would be greatly appreciated.