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>

Answer 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

Answer 2

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.