How can I change step from child component?

Question

I would like to display different components in a stepper, without use classic previous/next buttons.

I started to use classic material UI stepper as an example, but now I'm wondering how can I manage to add a button in my PlanSelection component to lead to next step?

function getSteps() {
  return ['Plan', 'Date', 'Informations', 'Payment'];
}


function getStepContent(step) {
  switch (step) {
    case 0:
      return <PlanSelection />;
    case 1:
      return <DateSelection />;
    case 2:
      return <InformationsCustomer />;
    case 3:
      return <SummaryPayment />;
    default:
      return 'Unknown step';
  }
}

export default function CustomizedSteppers() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

  const handleNext = () => {
    setActiveStep(prevActiveStep => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  };


  return (
    <Grid className={classes.root}>
      <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel StepIconComponent={ColorlibStepIcon}>
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>


     <Grid>{getStepContent(activeStep)}</Grid>

    </Grid>
  );
}

Answer 1

I just need to pass props to my desire component

return <PlanSelection handleBack={handleBack} handleNext={handleNext} />;

Then in PlanSelection.js,

const PlanSelection = (props) => {

const { handleBack, handleNext,t } = props;