onClick not working on first click in react nested component-CodePudding

I have a parent component. This parent component combines a lot of if else control and a lot of mini jsx. I added my case. If I click the NextBtnText in the Modal component. It doesn't fire the first click. It needs a second click. How can I fire the first click? What is wrong?

const StepperComponent = ({closeModal}) => {
      
      /**
       * there is some ,useState, useEffect and conditional functions
      */

      const test = () => setActiveStep((prevActiveStep) => prevActiveStep   1);
    
      const NextBtnText = () => {
        return (<Button
            onClick={test}
            disabled={firmType}
            className={styles.StepperNextButton}
          >
            <span>{t("createFirm.buttons.next")}</span>
            <KeyboardArrowRightIcon />
          </Button>
        );
      };
    
      const BackBtnText = () => {
        return (
          <>
            <span>{t("createFirm.buttons.back")}</span>
          </>
        );
      }
    
      
      const RequestAssignmentBtnText = () => {
        return (
          <Button
            onClick={handleSubmit}
            disabled={firmType}
            className={styles.StepperRequestButton}
          >
            <span>{t("createFirm.buttons.requestAssignment")}</span>
          </Button>
        )
      }
    
      return (
        <div className={styles.StepperContainer}>
          <Stepper activeStep={activeStep} className={styles.Steps}>
            {steps.map((label, index) => {
              return (
                <Step key={index}>
                  <StepLabel >{label}<span className={styles.StepCountMobile}>{`(${index   1} / ${steps.length})`}</span></StepLabel>
                </Step>
              );
            })}
          </Stepper>
          {getStepContent(activeStep)}
          <div className={styles.StepperButtons}>
            <Button
              disabled={activeStep === 0}
              onClick={handleBack}
              className={styles.StepperBackButton}
            >
              <span>{t("createFirm.buttons.back")}</span>
            </Button>
            {activeStep === steps.length - 1 ? (<RequestAssignmentBtnText />) : (<NextBtnText />)}
          </div>
        </div>
      );
    }

CodePudding user response：

Yo're not calling your function. Simply do:

<Button
onClick={(event) => handleSubmit(event)}
>

// Your function has to look like this

const handleSubmit = (event) => {
  // your code...
}

Or you can do this:

<Button
onClick={handleSubmit()}
>

// Your function has to look like this

const handleSubmit = () => {
   return (event) => {
     // your code...
   }
}

CodePudding user response：

What is the default value you set in useState() for activeStep?

I believe the onClick handler is working but the state is not what you expect on the first click. Maybe set the default value to 1 or 0 (I am not sure what is suitable for your use case).

const [activeStep, setActiveStep] = useState(1);

If the onClick is actually not working with the first click, try using plain HTML <input /> with test onClick handler and see if that works. It might have something to do with the Button component itself.

CodePudding user response：

I fixed the onClick problem. The cause is about rerendered after disabled={firmType}. My button has a disabled attribute. I need to control after the checkbox is true/false.

Before :

{activeStep === steps.length - 1 ? (<RequestAssignmentBtnText />) : (<NextBtnText />)}

Solution :

{activeStep === steps.length - 1
          ?
          <Button
            onClick={handleSubmit}
            className={styles.StepperNextButton}
          >
            <span>{t("createFirm.buttons.requestAssignment")}</span>
          </Button>
          :
          <Button
            onClick={handleNext}
            disabled={firmType}
            className={styles.StepperNextButton}
          >
            <span>{t("createFirm.buttons.next")}</span>
            <KeyboardArrowRightIcon />
          </Button>
        }

Actually, I want to know what is different between Before and Solution.

Maybe someone can explain the issue of solution.