reactjstypescriptvalidationtoggleyup

enable button with state of toggle

I am working on typescript with React and I am bit new. I have a button that has to be enable if the switch is off and on different valid states for when the switch is on. The valid states for when the switch is on are working well but the issue I am facing is when the switch is off after being turned on the button is not enabled.Here is the validation I am using

Solution

  • When a switch is turned off, it can affect/change isDirty. One potential solution is to also check if the switch is off

    {currentStep?.nextStep('creation') != null && (
  <Button
    appearance="primary"
    className="mc-ml-auto"
    type={"submit"}
    disabled={!isSwitch && (!isValid || !isDirty)}
    onClick={handleSubmit}
  >
    {currentStep?.id === steps.summary.id ? 'Confirmer' : 'Continuer'}
  </Button>
)}

    side note: if you are using your button within a form and it is type submit, you do not need to use on click and can instead use <form onSubmit> which helps trigger validation if applied.

    if your button is outside a form then you can give your form an id and pass the id to the button form prop