Create Stepper, that handle next and back as onClick-event - reactjs

Question

I want to create a Stepper, where you can handleNext and handleBack in the StepLabel as onClickevent.
I dont have a clue, how to do it.
here is the sandbox: https://codesandbox.io/s/stepper-forked-2q1wd
export default function IndexPage() {
const [activeStep, setActiveStep] = useState(0);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
function getStepsContent(stepIndex) {
switch (stepIndex) {
case 0:
return <h1>adsf</h1>;
case 1:
return <h1>adsf</h1>;
case 2:
return <h1>adsf</h1>;
}
}
const steps = getSteps();
return (
<>
<div>
<Stepper
alternativeLabel
activeStep={activeStep}
connector={<ColorlibConnector />}
>
{steps.map((label) => (
<Step key={label}>
<StepLabel
onClick={handleNext}
StepIconComponent={ColorlibStepIcon}
>
{label}
</StepLabel>
</Step>
))}
</Stepper>
</div>
<br />
<div>
{getStepsContent(activeStep)}
{activeStep === steps.length ? (
"Bewerbung abgesendet"
) : (
<div style={{ display: "flex", justifyContent: "center" }}>
<div>
<Button
variant="outlined"
color="primary"
onClick={handleBack}
disabled={activeStep === 0}
>
{activeStep > 0 ? "Zurück" : null}
</Button>
<Button
style={{ color: "white", margin: 30 }}
variant="contained"
color="primary"
onClick={handleNext}
>
{activeStep === steps.length - 1 ? "Absenden" : "Weiter"}
</Button>
</div>
</div>
)}
</div>
</>
);
}
I just added the handleNext function as a onClick, but I want also to go back with clicking on the stepper.

Answer 1

You can use the index to set the steps. replace your onClick on your StepLabel with this
{steps.map((label, index) => (
<Step key={label}>
<StepLabel
onClick={() => setActiveStep(index)}
StepIconComponent={ColorlibStepIcon}
>
{label}
</StepLabel>
</Step>
))}
Stepper StepLabel Fix