I currently show modals depending upon the updateReminderResponse object.
At the moment, you can click the submit button multiple times.
How can I disabled the button when the button is clicked, until UpdateVehicleReminder and saveNotifications have resolved, and aswell as updateReminderResponses as defined:
const [disabled, setDisabled] = useState(false);
const onSubmit = async () => {
const success = await tryBiometrics();
if (success) {
setdisabled(true);
...
tagNotifications(state);
dispatch(
UpdateVehicleReminder(
...
)
);
try {
await saveNotifications(state.notificationList);
} catch (e) {
logger.error("Error saving notifications", e);
throw e;
}
}
setdisabled(false);
};
const disableSubmit =
disabled && typeof updateReminderResponses !== "undefined" ? true : false;
<Button
title="example"
buttonStyle={[buttons.primary]}
titleStyle={buttons.primaryTitle}
onPress={() => onSubmit()}
disabled={disableSubmit} // disable until updateReminderResponse is defined
/>;
{
updateReminderResponse && updateReminderResponse.updateFailure && (
<MessageModals showModal callback={closeFailModal} />
);
}
{
updateReminderResponse && updateReminderResponse.success && (
<MessageModals
showModal
successTick
modalBody={myVehiclesCmsContent.updateRemindersSuccessMessage}
callback={closeSuccessModal}
/>
);
}
Don't track the disabled condition in the state. It only depends on the value of updateReminderResponses.
Just test that variable.
<Button ... disabled={typeof updateReminderResponses === 'undefined'}
You can use a ref to keep the button pressed state. It won't disable the button but can control submitting multiple times.
Make sure to set the pressed ref to false when you needed.
const pressed = useRef(false);
const onSubmit = async () => {
if(!pressed.current){
pressed.current = true
// your code
}
};