How to change the numbers in steps of material-ui Stepper?

Question

These steps takes the numbers which are length of the steps array i.e

    state = {
       steps: [0, 1, 2, 3]
    };

Later this state may change to

    this.setState({
      steps: [1,2,3,4]
    });

Or

   this.setState({
     steps: [2,3,4,5]
   });

and so on....

But in all the cases my steps show only 1,2,3,4,. I need to change those numbers according to the steps' array element.

This is the code for stepper.

<Stepper alternativeLabel nonLinear activeStep={activePage}>
     {steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(index)}
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}
  </Stepper>

How to achieve that?

If I use StepLabel component it looks like

But I don't want label. I want those labels should be on step buttons. Code for this:

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>

score 1 · Answer 1 · answered Jul 24 '18 at 07:19

1

As per your question what I understood is your steps numbers are changes right? If so then Problem: Basically you are changing your step number but sending index.

{steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(step)} // passed step value instead of index.
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}

If this is not scenarios please edit and elaborate your with example like step array on click of step acitveindex value you wish. Please show code of function handleStep

answered Jul 24 '18 at 07:19

Revansiddh

2,932
3
19
33

Thanks for the response. Initially step state contains [0,1,2,3 ] only. still the step buttons show 1,2,3,4. If I change initial state of steps to [1,2,5,6] (some random) also, step buttons are still 1,2,3,4. Why don't they change? – Coder Jul 24 '18 at 07:34
Use `StepLabel` component pass label as children to it, read docs, will edit ans – Revansiddh Jul 24 '18 at 07:43
1

https://github.com/mui-org/material-ui/issues/12262 : finally this solves my problem. – Coder Jul 24 '18 at 13:47

score 0 · Answer 2 · answered Feb 28 '22 at 19:59

Was dealing with this myself, due to having unlabeled steps and not wanting the total number to change. What you need to do is provide icon={step} to your StepLabel.

<Stepper alternativeLabel nonLinear activeStep={activePage}>
  {steps.map((step, index) => (
    <Step key={index}>
      <StepLabel
        onClick={this.handleStep(step)}
        disabled={dealsLoading}
        icon={step}
      >
        {step}
      </StepLabel>
    </Step>
  ))}
</Stepper>

This worked perfectly for me, hope you can use it as well.

score 0 · Answer 3 · answered May 17 '23 at 23:04

My answer is similar to @Shadoath where I needed the icons to display from step 0 up to number of steps-1:

<Stepper activeStep={activeStep} alternativeLabel sx={{ mt: 2 }}> 
   {steps.map((step, idx) => 
       <Step key={idx}>
           <StepLabel icon={`${idx}`}>{step.label}</StepLabel>
        </Step>
    )}
</Stepper>

How to change the numbers in steps of material-ui Stepper?

3 Answers3