How to wait the data from modal to continue the function?

Question

I am using modal to answer if the user want to delete some data. I need his answer to continue the function and delete or not depending on what was chosen. Here is my code: I am using an imagem to call the function:

<img src={deletes} width="25" height="25" alt="Edit" onClick={(e)=>deleteHandler()} className="imagemEnter"/>

This is the function called:

const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: "",
    confirm: ""
  });

function deleteHandler(){
    setModal({ isOpen: true, type: "sure?", frase:"Are you sure that you want to remove this data?", confirm:false });
console.log(modal.confirm);
}

This is my modal:

function ModalConfirm(props) {
  const { modal, setModal } = props;

  function closeModal() {
    setModal({ ...modal, isOpen: false });
  }

  function backPage(){
    setModal({ ...modal, isOpen: false, confirm true});
  }

return (
    <div> 
      if (props.modal.tipo === "sure?") {
          return (
            <div>
              <Modal
                ariaHideApp={false}
                isOpen={modal.isOpen}
                onRequestClose={closeModal}
                style={{
                  overlay: {
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    opacity: 1,
                  },
                  content: {
                    textAlign: "center",
                    position: "absolute",
                    width: "500px",
                    height: "360px",
                    top: "130px",
                    left: "550px",
                    right: "500px",
                    bottom: "200px",
                    border: "1px solid #ccc",
                    overflow: "auto",
                    WebkitOverflowScrolling: "touch",
                    borderRadius: "10px",
                    outline: "none",
                    padding: "20px",
                  },
                }}
              >
                  <img src={question} width="150" height="150" alt="Question" />
                  <p></p>
                  <p className="title">{props.modal.frase}</p>
                  <div>
                    <button
                      onClick={closeModal}
                      titulo="Cancel"
                    ></button>
                    <button
                      onClick={backPage}
                      titulo="Confirm"
                    ></button>
                  </div>
              </Modal>
            </div>
          );
        }
      })()}
    </div>
  );

At first click on remove image, the console.log(modal.confirm) works first than the modal is closed and so it prints empty. If I close the modal by clicking in the confirm button and try again to click on remove image, it shows true. How can I make the rest of the function depending on what the modal returns?

Resolution:

Modal:

const { confirmDelete, modal, setModal } = props;
function backPage(){
    confirmDelete(true);
    setModal({ ...modal, isOpen: false});
  }

Main:

const [confirmDelete, setConfirmDelete] = useState(false);
const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: ""
  });
function delete(valor) {
    if (valor) {
//delete fetch
}
function deleteHandler() {
    setModal({
      isOpen: true,
      tipo: "sure?",
      frase: "Are you sure that you want to remove this data?",
    });
  }
return(
....
<Modal
        confirmDelete={confirmDelete}
        modal={modal}
        setModal={setModal}
      />
)

score 0 · Accepted Answer · answered Nov 22 '22 at 13:45

You can do that by placing the actual data deletion ('the rest of the function') in an other function, that you pass in the modal's props.

In the modal, you call that function inside backPage. This way, the deletion will be called only if the user confirms.

This way, modal.confirm is unnecessary.

score 0 · Answer 2 · answered Nov 22 '22 at 14:02

You should provide information like where does your Modal component lie in the component tree.

But what you need to do is to pass back data from your Modal component. This you can do in two ways:

1. If you are using local state

You need to have Modal as child component of the component from which you want to deletion.

Add this to where you want to perform deletion:

const [confirmDelete, setConfirmDelete] = useState(false)

function handleConfirmDelete(value) {
  confirmDelete(value)
}

useEffect(() => {
  if(confirmDelete) {
    // delete 
    setConfirmDelete(false)
  }
}, [confirmDelete, setConfirmDelete])

Pass on handleConfirmDelete as prop to Modal:

<Modal handleConfirmDelete={handleConfirmDelete} modal={modal} setModal={setModal} />

Call handleConfirmDelete from backPage()

function backPage(){
    handleConfirmDelete(true)
    setModal({ ...modal, isOpen: false, confirm true});
}

2. If you are using some state management library like Redux

Create a state in redux, for example confirmDelete as a boolean and dispatch an action to set it to true inside the backPage function. Then use this value in the component where you want to perform the delete inside useEffect as mentioned above.

How to wait the data from modal to continue the function?

2 Answers2