Uncaught TypeError: confirm is not a function

June 16, 2022

i have my simple code snippet and i’m trying to run but I’m getting the error " Uncaught TypeError: confirm is not a function"

import { Modal } from "react-bootstrap"

const { confirm } = Modal;
function delete(param){
 confirm({
  title: "Do you Want to delete this message?",
  icon: <AiOutlineExclamationCircle />,
  content: message, 
 });
}

return (<Button onClick={() => delete()}>Delete</Button>)

I’m not finding a solution how to fix this. Someone help.

>Solution :

There is no confirm option on Modal API. I guess what you want is to show the Modal as a confirmation modal. To do so you should do something like:

import { Modal } from "react-bootstrap"

const YourComponent = () => {
  const [showModal, setShowModal] = useState(false)

  const handleClose = () => {
   // Your logic here
   setShowModal(false)
  }

  return (
    <>
      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Do you Want to delete this message?</Modal.Title>
        </Modal.Header>
        <Modal.Body>Some body message</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            no
          </Button>
          <Button variant="primary" onClick={handleClose}>
            yes
          </Button>
        </Modal.Footer>
      </Modal>
      
      <Button onClick={() => setShowModal(true)}>Delete</Button>
    </>
  )
}