How to add Material-UI form with Steppers in React-Amin Create Component

Question

I have a very long form in my React-Admin app. I would like to add the form elements to a stepper.

From Material-UI, they provide an example of Steppers

What id like to be assisted on is

1. How to add components such as to the stepper's function

getStepContent()

2. How to wrap all input components into a form

3. Avoid moving to the next step if form in ine step is not validated.

   function getStepContent(stepIndex) { switch (stepIndex) { case 0: return 'Select campaign settings...'; case 1: return 'What is an ad group anyways?'; case 2: return 'This is the bit I really care about!'; default: return 'Uknown stepIndex'; } }

   class HorizontalLabelPositionBelowStepper extends React.Component { state = { activeStep: 0, };

   handleNext = () => { this.setState(state => ({ activeStep: state.activeStep + 1, })); };

   handleBack = () => { this.setState(state => ({ activeStep: state.activeStep - 1, })); };

   handleReset = () => { this.setState({ activeStep: 0, }); };

   render() { const { classes } = this.props; const steps = getSteps(); const { activeStep } = this.state;

   return (
     <div className={classes.root}>
       <Stepper activeStep={activeStep} alternativeLabel>
         {steps.map(label => {
           return (
             <Step key={label}>
             <StepLabel>{label}</StepLabel>
             </Step>
           );
         })}
       </Stepper>
       <div>
         {this.state.activeStep === steps.length ? (
           <div>
             <Typography className={classes.instructions}>All steps completed</Typography>
             <Button onClick={this.handleReset}>Reset</Button>
           </div>
         ) : (
           <div>
             <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
             <div>
               <Button
                 disabled={activeStep === 0}
                 onClick={this.handleBack}
                 className={classes.backButton}
               >
                 Back
               </Button>
               <Button variant="contained" color="primary" onClick={this.handleNext}>
                 {activeStep === steps.length - 1 ? 'Finish' : Next'}
               </Button>
             </div>
           </div>
        )}
       </div>
     </div>
   );
   

   } }

   HorizontalLabelPositionBelowStepper.propTypes = { classes: PropTypes.object, };

   export default withStyles(styles(HorizontalLabelPositionBelowStepper);

Answer 1

Incase anyone ever gets stuck on this, I found a nice tutorial on youtube that you can easily follow.