Building a stepper with compound components

AppCombined.js

import React from "react";
import { render } from "react-dom";
import { StepList } from "./StepList";
import { Step } from "./Step";

const PageTwo = () => (
  <h2>We have a second page.</h2>
)

const PageThree = () => (
  <h2>Page three is working.</h2>
)

const App = () => (
  <StepList>
    <Step>
      <h1>Hello world on page one!</h1>
    </Step>
    <Step component={PageTwo} />
    <Step component={PageThree} />
  </StepList>
);

render(<App />, document.getElementById("root"));

Buttons.js

import React from "react";

class Next extends React.Component {

  render() {
    const { isActive } = this.props;
    if (isActive === false) return null;

    return (
      <button onClick={() => this.props.goToNextStep()}>
        Next
      </button>
    );
  }
}

class Previous extends React.Component {

  render() {
    const { isActive } = this.props;
    if (isActive === false) return null;

    return (
      <button onClick={() => this.props.goToPreviousStep()}>
        Previous
      </button>
    );
  }
}

class Submit extends React.Component {

  render() {
    const { isActive } = this.props;
    if (isActive === false) return null;

    return (
      <button type="submit">
        Submit
      </button>
    );

  }
}

export { Previous, Next, Submit };

Step.js

import React from "react";
import { Previous, Next, Submit } from "./Buttons";

class Step extends React.Component {

  render() {
    const {
      isActive,
      displayPrevious,
      displayNext,
      displaySubmit,
      component,
      children,
    } = this.props;

    if(isActive === false) return null;

    return (
      <React.Fragment>
        {component ? React.createElement(component) : children}
        <Previous
          isActive={displayPrevious}
          goToPreviousStep={() => this.props.goToPreviousStep()}
        />
        <Next
          isActive={displayNext}
          goToNextStep={() => this.props.goToNextStep()}
        />
        <Submit isActive={displaySubmit} />
      </React.Fragment>
    );
  }
}

export { Step };

StepList.js

import React from "react";

class StepList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentStep: 0,
      totalSteps: this.props.children.length - 1,
    };
  }

  goToPreviousStep = () => {
    this.setState({ currentStep: this.state.currentStep - 1 });
  };

  goToNextStep = () => {
    this.setState({ currentStep: this.state.currentStep + 1 });
  };

  render() {
    const children = React.Children.map(this.props.children, (child, index) => {
      const { currentStep, totalSteps } = this.state;

      return React.cloneElement(child, {
        isActive: index === currentStep,
        displayPrevious: currentStep > 0,
        displayNext: currentStep < totalSteps,
        displaySubmit: currentStep === totalSteps,
        goToPreviousStep: () => this.goToPreviousStep(),
        goToNextStep: () => this.goToNextStep(),
      });
    });

    return children;
  }
}

export { StepList };