switch case and if else not working in Reactjs

Question

So I have one button "Next". I want to change its functionality depending on the step the user is in.

This is what I've done :

I have an array of steps as follows:

    const steps = getSteps()

    function getSteps() {
        return ['Select the dates', 'Choose the type of complaint', 'Select the supervisor'];
    }

Now this is a stepper which has 2 buttons one is Next other is Back, the button where I pass the index of the array steps is Next " handleNext(index) ", it tells which step the user is on:

 <Stepper className={classes.stepperBg} activeStep={activeStep} orientation="vertical">
                    {steps.map((label, index) => (
                        <Step key={label}>
                            <StepLabel>{label}</StepLabel>
                            <StepContent>
                                <Typography>{getStepContent(index)}</Typography>
                                <div className={classes.actionsContainer}>
                                    <div>
                                        <Button
                                            disabled={activeStep === 0}
                                            onClick={handleBack}
                                            className={classes.button}
                                        >
                                            Back
                                        </Button>
                                        <Button
                                            variant="contained"
                                            color="primary"
                                            onClick={handleNext(index)}
                                            className={classes.button}
                                            disabled={nextButton}
                                        >
                                            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                                        </Button>
                                    </div>
                                </div>
                            </StepContent>
                        </Step>
                    ))}
                </Stepper>

And this is the function that handles the functionality of the Next button according to the index of the step.

function handleNext(index) {
        switch(index) {
            case 0:
                if (radioValue === 'one' && oneDate !== null) {
                        setReportData(
                            mainData.filter(
                                (obj) =>
                                    Moment(obj.date).format("DD MMM yyyy") === Moment(oneDate).format("DD MMM yyyy")
                            )
                        )

                        setActiveStep((prevActiveStep) => prevActiveStep + 1);


                } else {
                    if (fromDate !== null && toDate !== null) {

                        setReportData(
                            mainData.filter(
                                (obj) =>
                                    Moment(obj.date).format("DD MMM yyyy") >= Moment(fromDate).format("DD MMM yyyy") &&
                                    Moment(obj.date).format("DD MMM yyyy") <= Moment(toDate).format("DD MMM yyyy")
                            )
                        )
                        setActiveStep((prevActiveStep) => prevActiveStep + 1);


                    }
                }

                break
            case 1:
                return 'type selected'
            case 2:
                return 'supervisor selected'
            default:
                return null;
        }
    }

Now the error that I'm getting is that React can't handle too many renders. I have no idea how to solve this issue.

Answer 1

Change onClick={handleNext(index)} to onClick={() => handleNext(index)}