I have a react app. In it when a user summits the form, I want to open a modal, and store the users response in state. Based on this reponse I want to preform some business logic, then post the form.
This is my onsubmit method
async function onSubmit(submission: IPayload) {
await handleModal();
await submit(submission);
}
async function submit(submission: ICreateAdPayload) {
await api.create({ this is where all the props go})
}
// Heres I set the state of the modal to open, which then chanes the open prop on another component for the modal to open.
async function handleModal(submission: any) {
setShowModal(true);
// handle logic
setShowModal(false);
}
However my submit function is being carried out as soon as the modal opens. Any idea?
To be able to await handleModal(...) then that method must return a Promise which you resolve when it's work has finished - assuming it itself does not need to await anything, it does NOT need to be marked async
function handleModal(submission: any) {
setShowModal(true);
return new Promise(resolve => {
// handle logic
setShowModal(false);
resolve();
});
}