List.js

import React, { Component } from 'react';
import styles from './step-list.module.scss';

class StepList extends Component {
  steps = [
    { key: 0, title: 'Overview' },
    { key: 1, title: 'Dates' },
    { key: 2, title: 'Add Seminars' },
    { key: 3, title: 'Upload an image' },
    { key: 4, title: 'Preview' }
  ];

  constructor(props) {
    super(props);
    this.state = {
      stepState: this.getStepState(this.props.currentCount)
    };
  }

  componentWillReceiveProps = nextProps => {
    if (nextProps.currentCount !== this.props.currentCount) {
      this.setState(() => ({
        stepState: this.getStepState(nextProps.currentCount)
      }));
    }
  };

  getStepState = currentStep => {
    const styles = [];
    const totalLength = this.steps.length;
    for (let i = 0; i < totalLength; i++) {
      if (i === currentStep) styles.push('step-current');
      if (i < currentStep) styles.push('step-complete');
      if (i > currentStep) styles.push('step-incomplete');
    }
    return {
      currentStep,
      styles
    };
  };

  getClassName = currentStep => {
    return `steps-${this.state.stepState.styles[currentStep]}`;
  };

  render() {
    return (
      <ul className={styles.steps}>
        {this.steps.map(({ key, title }, index) => {
          return (
            <li key={key} className={this.getClassName(index)}>
              {title}
            </li>
          );
        })}
      </ul>
    );
  }
}

export default StepList;

import React, { Component } from 'react';
import styles from './step-list.module.scss';

class StepList extends Component {
  steps = [
    { key: 0, title: 'Overview' },
    { key: 1, title: 'Dates' },
    { key: 2, title: 'Add Seminars' },
    { key: 3, title: 'Upload an image' },
    { key: 4, title: 'Preview' }
  ];

  getStepState = currentStep => {
    const styles = [];
    const totalLength = this.steps.length;
    for (let i = 0; i < totalLength; i++) {
      if (i === currentStep) styles.push('step-current');
      if (i < currentStep) styles.push('step-complete');
      if (i > currentStep) styles.push('step-incomplete');
    }
    return {
      currentStep,
      styles
    };
  };

  getClassName = currentStep => {
    const stepState = this.getStepState(currentStep);
    return `steps-${stepState.styles[currentStep]}`;
  };

  render() {
    return (
      <ul className={styles.steps}>
        {this.steps.map(({ key, title }, index) => {
          return (
            <li key={key} className={this.getClassName(index)}>
              {title}
            </li>
          );
        })}
      </ul>
    );
  }
}

export default StepList;