call save function after the confirmation box react js

Question

I am using the below popup as a confirmation message. currently, a popup window is loading correctly with 'Yes', 'No' Buttons. If the user clicks the confirmation 'YES' button, I need to save data, If click 'NO' i need to close the popup window. Please check my files.

my Modal

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;

I call this modal inside the invoice form. When the user clicks the save button. this confirmation show. currently, it's working.

Invoice.js file - save function

    import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
      const [showModal, setShowModal] = useState(false);

      const saveInvoice = (data) => {
     setShowModal(true);
    //in here i need to check user click yes or no button 
   

     if(yes){
    
    httpPost(SAVE_INVOICE,data, header)
    .then((response) => {
    if (response.status === 200) {
    toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
    }
    })
    }
        }
else{
 setShowModal(false);
}

According to my requirement, I need to check user clicks Yes or No inside the saveInvoice function.
How I check it inside the function.

Answer 1

You need to create 2 function, one for yes and the other one is for no clicks.

const [data, setData] = useState();

const saveInvoice = (data) => {
    setShowModal(true);
    setData(data);
}

const onYes = (event) => {
    httpPost(SAVE_INVOICE, data, header).then((response) => {
        if (response.status === 200) {
            toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
        }
        setShowModal(false);
        setData(null);
    })
}

const onNo = (event) => {
    setShowModal(false);
    setData(null);
}

return (
    ...
    {
        showModal && (
            <Modal onYes={onYes} onNo={onNo} />
        )
    }
    ...
)

If you want you can show/hide the modal with setting only data variable.

const [data, setData] = useState();

const saveInvoice = (data) => {
    setData(data);
}

const onYes = (event) => {
    httpPost(SAVE_INVOICE, data, header).then((response) => {
        if (response.status === 200) {
            toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
        }
        setData(null);
    })
}

const onNo = (event) => {
    setData(null);
}

return (
    ...
    {
        data && (
            <Modal onYes={onYes} onNo={onNo} />
        )
    }
    ...
)