CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Kumara
Kumara

Reputation: 528

how to show react bootstrap modal inside the function

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

Upvotes: 2

Views: 2716

Answers (2)

Abdel P.
Abdel P.

Reputation: 738

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)}

Upvotes: 1

Yadab
Yadab

Reputation: 1883

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)} />
    </>
  )
}

Upvotes: 0

Related Questions