I have a standard form in react thats built with react final form. When the user clicks submit, I show a modal to them by updating state to reveal the modal. The modal has two options which update state. I want to wait for one of the options to be clicked before firing the post endpoint.
Here is the form
<div>
<Wrapper>
<Form
onSubmit={onSubmit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit} noValidate>
// Fields are here
<Modal
isOpen={showModal}
handleAcceptClick={handleAcceptClick}
handleDeclineClick={handleDeclineClick}
/>
<Button
buttonType="submit"
/>
</form>
)}
/>
</Wrapper>
</div>
// This is the onSubmit methiod
async function onSubmit(submission: Payload) {
setShowModal(true);
await api.create({
submission,
});
}
In the modal component theres a callback to setstate in the same file the form is in, based on if they accept or deny. How can I wait for that state happen before I call the api.create method in on submit.
HTML:
<div>
<Wrapper>
<Form
onSubmit={onSubmit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit} noValidate>
// Fields are here
<Modal
isOpen={showModal}
handleAcceptClick={handleAcceptClick}
handleDeclineClick={handleDeclineClick}
/>
<Button
buttonType="button"
onClick={confirm}
/>
</form>
)}
/>
</Wrapper>
</div>
JS CODE:
function confirm() {
setShowModal(true);
}
// call this function on click of one option in modal
function onConfirm(){
onSubmit();
}