title: How to change the numbers in steps of material-ui Stepper?
body: <p><a href="https://i.stack.imgur.com/2wHb3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2wHb3.png" alt="enter image description here"></a></p>
  
  <p>These steps takes the numbers which are length of the <strong>steps</strong> array i.e </p>
  
  <pre><code>    state = {
         steps: [0, 1, 2, 3]
      };
  </code></pre>
  
  <p>Later this state may change to</p>
  
  <pre><code>    this.setState({
        steps: [1,2,3,4]
      });
  </code></pre>
  
  <p>Or </p>
  
  <pre><code>   this.setState({
       steps: [2,3,4,5]
     }); 
  </code></pre>
  
  <p>and so on....</p>
  
  <p>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.</p>
  
  <p>This is the code for stepper.</p>
  
  <pre><code>&lt;Stepper alternativeLabel nonLinear activeStep={activePage}&gt;
       {steps.map((step, index) =&gt; {
         return (
          &lt;Step key={index}&gt;
            &lt;StepButton
              onClick={this.handleStep(index)}
              disabled={dealsLoading}
            &gt;
              &lt;/StepButton&gt;
          &lt;/Step&gt;
        );
      })}
    &lt;/Stepper&gt;
  </code></pre>
  
  <p>How to achieve that? </p>
  
  <p>If I use StepLabel component it looks like
  <a href="https://i.stack.imgur.com/Se0is.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Se0is.png" alt="enter image description here"></a></p>
  
  <p>But I don't want label. I want those labels should be on step buttons.
  Code for this: </p>
  
  <pre><code> &lt;Stepper alternativeLabel nonLinear activeStep={activePage}&gt;
          {steps.map((step, index) =&gt; {
            return (
              &lt;Step key={index}&gt;
                 &lt;StepLabel 
                    onClick={this.handleStep(step)}
                    disabled={dealsLoading}
                 &gt;
                  {step}
                &lt;/StepLabel&gt;
              &lt;/Step&gt;
            );
          })}
        &lt;/Stepper&gt;
  </code></pre>