How can I submit each screen in a stepper form with Material UI?

Question

I need to save the user information in db when the screen is changed by user.

I am using React and Material UI Steppers.

Answer 1

You can use an onClick function that calls an API endpoint that does the database saving for you when the user clicks on one of the steps, like so:

class ExampleComponent extends React.Component {
  handleStepperClick = () => {
    //Handle your API call here
  }

  render() {
    const steps = ["Step A", "Step B", "Step C"];

    return (
      <Stepper nonLinear >
        {steps.map((label, index) => (
          <Step key={index}>
            <StepButton onClick={this.handleStepperClick}>
              <StepLabel>{label}</StepLabel>
            </StepButton >
          </Step>
        ))}
      </Stepper>
    );
  }
}