title: How to add Material-UI form with Steppers in React-Amin Create Component
body: <p>I have a very long form in my <a href="https://marmelab.com/react-admin/Tutorial.html" rel="nofollow noreferrer">React-Admin</a> app. 
  I would like to add the form elements to a stepper.</p>
  
  <p>From Material-UI, they provide an example of <a href="https://material-ui.com/demos/steppers/" rel="nofollow noreferrer">Steppers</a></p>
  
  <p>What id like to be assisted on is</p>
  
  <ol>
  <li>How to add components such as  to the stepper's function</li>
  </ol>
  
  <blockquote>
    <p>getStepContent()</p>
  </blockquote>
  
  <ol start="2">
  <li><p>How to wrap all input components into a form</p></li>
  <li><p>Avoid moving to the next step if form in ine step is not validated.</p>
  
  <p>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';
    }
  }</p>
  
  <p>class HorizontalLabelPositionBelowStepper extends React.Component {
    state = {
      activeStep: 0,
    };</p>
  
  <p>handleNext = () => {
      this.setState(state => ({
        activeStep: state.activeStep + 1,
      }));
    };</p>
  
  <p>handleBack = () => {
      this.setState(state => ({
        activeStep: state.activeStep - 1,
      }));
    };</p>
  
  <p>handleReset = () => {
      this.setState({
        activeStep: 0,
      });
    };</p>
  
  <p>render() {
      const { classes } = this.props;
      const steps = getSteps();
      const { activeStep } = this.state;</p>
  
  <pre><code>return (
    &lt;div className={classes.root}&gt;
      &lt;Stepper activeStep={activeStep} alternativeLabel&gt;
        {steps.map(label =&gt; {
          return (
            &lt;Step key={label}&gt;
            &lt;StepLabel&gt;{label}&lt;/StepLabel&gt;
            &lt;/Step&gt;
          );
        })}
      &lt;/Stepper&gt;
      &lt;div&gt;
        {this.state.activeStep === steps.length ? (
          &lt;div&gt;
            &lt;Typography className={classes.instructions}&gt;All steps completed&lt;/Typography&gt;
            &lt;Button onClick={this.handleReset}&gt;Reset&lt;/Button&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;
            &lt;Typography className={classes.instructions}&gt;{getStepContent(activeStep)}&lt;/Typography&gt;
            &lt;div&gt;
              &lt;Button
                disabled={activeStep === 0}
                onClick={this.handleBack}
                className={classes.backButton}
              &gt;
                Back
              &lt;/Button&gt;
              &lt;Button variant="contained" color="primary" onClick={this.handleNext}&gt;
                {activeStep === steps.length - 1 ? 'Finish' : Next'}
              &lt;/Button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
       )}
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}
  }</p>
  
  <p>HorizontalLabelPositionBelowStepper.propTypes = {
    classes: PropTypes.object,
  };</p>
  
  <p>export default withStyles(styles(HorizontalLabelPositionBelowStepper);</p></li>
  </ol>