React Bootstrap - 'openModal' is not defined no-undef

Question

When a button is clicked I want a modal to be opened. I have implemented the code but I am thrown errors and I cannot figure out why. Here is 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;

In console I am getting the following errors:

'state' is not defined       no-undef     
'openModal' is not defined   no-undef 
'closeModal' is not defined  no-undef

Yet I am not sure why. Any help will be very much appreciated.

Answer 1

Need to change the name of the component to CustomTable as you already have Table being imported from reactstrap to avoid name collision.

We should not be using this inside the functional component so change your code to make use of the hooks .

import React, { useState } from "react";
import {
    Modal,
    Button,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    CardFooter,
    Table,
    Row,
    ButtonGroup,
    Col,
  } from "reactstrap";

  function CustomTable() {

  const [ isOpen , setIsOpen ] = useState(false);
    

  const openModal = () =>  setIsOpen(true);

  const closeModal = () => setIsOpen(false);

  return (
      <>
        <div className="contentGroup">
          <Row>
            <Col md="12">
              <Card>
                    <CardHeader>
                    <ButtonGroup style={{float: 'right'}}>
                        <Button className="btn-round btn-icon" color="blue" onClick={openModal} style={{float: 'right'}}>
                            <i className="icon-plus-add"/>
                        </Button>
                    </ButtonGroup>
                   </CardHeader>
                       ...
             </Card>
             <Modal show={isOpen} onHide={closeModal}>
              <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Modal text</Modal.Body>
              <Modal.Footer>
              <Button color="info" onClick={closeModal}>
                Close
              </Button>
              </Modal.Footer>
              </Modal>
          </Col>
        </Row>
     </div>
    </>
   );
  }

export default CustomTable;