title: How to validate each form step in material ui stepper?
body: <p>Typical material-ui stepper below. </p>
  
  <pre><code>  export default function HorizontalLinearStepper() {
      const classes = useStyles();
      const [activeStep, setActiveStep] = React.useState(0);
      const [skipped, setSkipped] = React.useState(new Set());
      const steps = getSteps();
  
      const isStepOptional = step =&gt; {
          return step === 1;
      };
  
      const isStepSkipped = step =&gt; {
          return skipped.has(step);
      };
  
      const handleNext = () =&gt; {
      let newSkipped = skipped;
      if (isStepSkipped(activeStep)) {
          newSkipped = new Set(newSkipped.values());
          newSkipped.delete(activeStep);
      }
  
      setActiveStep(prevActiveStep =&gt; prevActiveStep + 1);
      setSkipped(newSkipped);
  };
  
  const handleBack = () =&gt; {
      setActiveStep(prevActiveStep =&gt; prevActiveStep - 1);
  };
  
  const handleSkip = () =&gt; {
      if (!isStepOptional(activeStep)) {
          // You probably want to guard against something like this,
          // it should never occur unless someone's actively trying to break something.
          throw new Error("You can't skip a step that isn't optional.");
      }
  
      setActiveStep(prevActiveStep =&gt; prevActiveStep + 1);
      setSkipped(prevSkipped =&gt; {
          const newSkipped = new Set(prevSkipped.values());
          newSkipped.add(activeStep);
          return newSkipped;
      });
  };
  
  const handleReset = () =&gt; {
      setActiveStep(0);
  };
  
  return (
      &lt;div className={classes.root}&gt;
          &lt;Stepper activeStep={activeStep}&gt;
              {steps.map((label, index) =&gt; {
                  const stepProps = {};
                  const labelProps = {};
                  if (isStepOptional(index)) {
                      labelProps.optional = &lt;Typography variant="caption"&gt;Optional&lt;/Typography&gt;;
                  }
                  if (isStepSkipped(index)) {
                      stepProps.completed = false;
                  }
                  return (
                      &lt;Step key={label} {...stepProps}&gt;
                          &lt;StepLabel {...labelProps}&gt;{label}&lt;/StepLabel&gt;
                      &lt;/Step&gt;
                  );
              })}
          &lt;/Stepper&gt;
          &lt;div&gt;
              {activeStep === steps.length ? (
                  &lt;div&gt;
                      &lt;Typography className={classes.instructions}&gt;
                          All steps completed - you&amp;apos;re finished
                      &lt;/Typography&gt;
                      &lt;Button onClick={handleReset} className={classes.button}&gt;
                          Reset
                      &lt;/Button&gt;
                  &lt;/div&gt;
              ) : (
                  &lt;div&gt;
                      &lt;div className={classes.instructions}&gt;{getStepContent(activeStep)}&lt;/div&gt;
                      &lt;div&gt;
                          &lt;Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}&gt;
                              Back
                          &lt;/Button&gt;
                          {isStepOptional(activeStep) &amp;&amp; (
                              &lt;Button
                                  variant="contained"
                                  color="primary"
                                  onClick={handleSkip}
                                  className={classes.button}
                              &gt;
                                  Skip
                              &lt;/Button&gt;
                          )}
  
                          &lt;Button
                              variant="contained"
                              color="primary"
                              onClick={handleNext}
                              type="submit"
                              className={classes.button}
                          &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>Here is function i create to choice step</p>
  
  <pre><code>function getStepContent(step) {
      switch (step) {
          case 0:
              return &lt;Step1/&gt;;
          case 1:
              return &lt;Step2/&gt;;
          case 2:
              return 'This is the bit I really care about!';
          default:
              return 'Unknown step';
      }
  }
  </code></pre>
  
  <p>Step1 and Step2 are components that has 2 forms inside build with react-final-form</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Form } from 'react-final-form';
  import initialValuesCreator from './creationMethods/initialValuesCreator';
  import { validationCreator } from './creationMethods/validationSchemaCreator';
  
  class CustomValidationForm extends Component {
  
      render() {
          const {
              config ,children, submit = () =&gt; {}
          } = this.props;
  
          return (
              &lt;Form
                  onSubmit={(event) =&gt; {
                      submit(event);
                  }}
                  initialValues={initialValuesCreator(config)}
                  validate={values =&gt; validationCreator(values, config)}
                  render={({handleSubmit}) =&gt; (
                      &lt;form noValidate autoComplete={'off'} onSubmit={handleSubmit}&gt;
                          {children}
                      &lt;/form&gt;
                  )}
              /&gt;
          )
      }
  }
  </code></pre>
  
  <p>And here comes the question. Material ui stepper has handleNext function. Its my submit for each step. Each step will be some kind of form with validation. When user is on step1 and he press submit i want to show him input errors (something is required etc) and prevent jumping to next step. Step1 can have multiple small forms so all the form should be validated when handleNext is pressed.</p>