Stepper : non-linear

Hi,

We don't have enough code examples with working steppers in our documentation.

We will add it.

For examples, you can use the next code as an example(note: code can be refactored and improved. It's only an easy example of how it works) :

import React, { Component } from "react";
import { MDBContainer, MDBStepper, MDBStep, MDBIcon } from "mdbreact";

class StepperPage extends Component {
  state = {
    activeStep: 1,
    completed: []
  };

  handleClick = number => {
    const completedCopy = [...this.state.completed];
    completedCopy.push(number - 1);

    this.setState({ activeStep: number, completed: completedCopy });
  };

  render() {
    return (
      <MDBContainer>
        <MDBContainer className="mt-5">
          <hr className="my-5" />
          <h2>Vertical stepper</h2>

          <MDBStepper vertical>
            <MDBStep
              className={`${this.state.activeStep === 1 ? "active" : ""} ${
                this.state.completed.includes(1) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">1</span>
                <span className="label" onClick={() => this.handleClick(1)}>
                  First step
                </span>
              </a>
              {this.state.activeStep === 1 && <p className="step-content">First step</p>}
            </MDBStep>

            <MDBStep
              className={` ${this.state.activeStep === 2 ? "active" : ""}  ${
                this.state.completed.includes(2) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">2</span>
                <span className="label" onClick={() => this.handleClick(2)}>
                  Second step
                </span>
              </a>
              {this.state.activeStep === 2 && (
                <div className="step-content grey lighten-4">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere
                    iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum
                    similique. Inventore nostrum ut, nobis porro sapiente.
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
                    repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
                    totam, atque odit fugiat.
                  </p>
                  <p>
                    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe
                    reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam.
                    Quisquam expedita ab fugiat.
                  </p>
                </div>
              )}
            </MDBStep>

            <MDBStep
              className={`warning ${this.state.activeStep === 3 ? "active" : ""}  ${
                this.state.completed.includes(3) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">
                  <MDBIcon icon="exclamation-triangle" />
                </span>
                <span className="label" onClick={() => this.handleClick(3)}>
                  Third step
                </span>
              </a>
              {this.state.activeStep === 3 && <p className="step-content">Third step</p>}
            </MDBStep>

            <MDBStep
              className={`${this.state.activeStep === 4 ? "active" : ""} ${
                this.state.completed.includes(4) ? "completed" : ""
              }`}
            >
              <a href="#!">
                <span className="circle">4</span>
                <span className="label" onClick={() => this.handleClick(4)}>
                  Fourth step
                </span>
              </a>
              {this.state.activeStep === 4 && <p className="step-content">Fourth step</p>}
            </MDBStep>
          </MDBStepper>
        </MDBContainer>
      </MDBContainer>
    );
  }
}

export default StepperPage;

Best regards.