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}
    />
  );
}
 

CodePudding user response：

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'}

CodePudding user response：

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
  }
};