enable button with state of toggle

Issue

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

    intention: {
    id: 'intention',
    label: 'Intention',
    route: 'intention',
    schema: Yup.object().shape({
      clientType: Yup.string().required('The type field is required'),
      intentionOption: Yup.string().required('Intention type field is required'),
      estimatedTotalAmount: Yup.number().moreThan(-1,'Total estimated amount'),
      productVolume: Yup.array().of(
          Yup.object().shape({
            productType: Yup.string().required('Product Type is required'),
            productValue: Yup.number()
                //.moreThan(0, 'Volume must be greater than 0')
                .required('Volume is required'),
          })
      ).test({
        name: 'productVolume',
        message: 'Custom validation for productVolume',
        test: function (value) {
          const { parent } = this;
          const estimatedAmount = parent?.estimatedAmount || 0;
          const totalProductValue = value?.reduce((acc, item) => acc + (item?.productValue || 0), 0) || 0;
          return totalProductValue <= estimatedAmount;
        },
      }),

here is the common footer component and the button that I want to enable is the continuer one

    {currentStep?.nextStep('creation') != null && (
                <Button
                    appearance="primary"
                    className="mc-ml-auto"
                    type={"submit"}
                    disabled={!isValid || !isDirty }
                    onClick={handleSubmit}

                >
                    {currentStep?.id === steps.summary.id
                        ? 'Confirmer'
                        : 'Continuer'}

and my intention button and how I handled the switch in it

    const clearVolumeFields = () => {

        VolumeFields.forEach((_, index) => {
            setValue(`productVolume.${index}.productType`, '');
            setValue(`productVolume.${index}.productValue`, 0);
        });

        setValue('estimatedTotalAmount', 0);
    };
    useEffect(() => {
        if (isSwitch) {
            initializeVolumeFields();
        }
    }, [isSwitch]);
    
    const handleSwitchChange = (isChecked: boolean) => {
        setIsSwitch(isChecked);
        // If the switch is turned off, clear the volume fields
        if (!isChecked) {
            setSelectedProductTypes(new Set());
            clearVolumeFields();
        }
    };

    <Switch
       id={"includeTransfer"}
       onChange={(e) => handleSwitchChange(e)}/>
</FormGroup>

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

Answered By - Kyle Xyian Dilbeck