Skip to content

Instantly share code, notes, and snippets.

@nodox nodox/StepList.js
Created Jul 1, 2018

Embed
What would you like to do?
Building a stepp - 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 };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.