how to show react bootstrap modal inside the function

Question

I am using react bootstrap modal popup. when user submit form, I need to modal show popup,

This is my modal (SaveConfirmationModal )

    import { Button, Modal} from "react-bootstrap";
function SaveConfirmationModal(props) {
  return (
    <div>
      <Modal {...props} size="lg">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            do u want to save ?
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <button>YEs </button>
          <button>No</button>
        </Modal.Body>
       
      </Modal>
    </div>
  );
}

export default SaveConfirmationModal;

this is my invoice page save function. I imported my modal in to the invoice page.

import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
 const loadPopup= (data) => {
  showmodal;
  if(yes){
    saveForm();
    }
else{
close modal
}
}

const saveForm= (data){
 my save function
}

my save button in the invoice page

<button onClick={loadPopup}> Save </button>

This is the very little sample to demonstrate my issue. If you can please help me to show this confirmation box. thanks

Can you post your code for the invoice page? Where are you rendering the button? — Yadab, Mar 22 '21 at 06:15

score 1 · Answer 1 · answered Mar 22 '21 at 06:31

In the component where you use your SaveConfirmationModal, you can use state Hooks, like this:

import React, {useState} from 'react';
...
  const [showModal, setShowModal] = useState(false);

  const loadPopup = () => {
    setShowModal(true);
  };

And you need to change the state to false when the modal is dismissed: <SaveConfirmationModal show={showModal} onHide={() => setShowModal(false)}

score 0 · Answer 2 · answered Mar 22 '21 at 06:25

You can call a function from a prop on button click like below.

import { Button, Modal} from "react-bootstrap";
function SaveConfirmationModal(props) {
  return (
    <div>
      <Modal {...props} size="lg">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            do u want to save ?
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <button onClick={props.onYes}>YEs </button>
          <button onClick={props.onNo}>No</button>
        </Modal.Body>
       
      </Modal>
    </div>
  );
}

export default SaveConfirmationModal;

Then in your invoice page create a state for showing a modal and pass the props like below.

import { useState } from 'react'
import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
 
const InvoicePage = () => {
  const [showModal, setShowModal] = useState(false);
  
  const saveForm = (data) {
   // my save function
  }

  
  return (
    <>
      <button onClick={() => setShowModal(true)}> Save </button>
      <SaveConfirmationModal show={showModal} onYes={() => saveForm(data)} onNow={() => setShowModal(false)} />
    </>
  )
}

form submit using form onSubmit.
how i modify this
– Kumara Mar 22 '21 at 07:47 — Kumara, Mar 22 '21 at 07:47
But thats not what you have asked in your question. – Yadab Mar 22 '21 at 23:40 — Yadab, Mar 22 '21 at 23:40

how to show react bootstrap modal inside the function

2 Answers2

Linked