MultiStep Form - Cannot update during an existing state transition error - reactjs

Question

I am trying to build a multi-stage form in React. I build a simple demo to try out the functionality of going through the form. As a template, I used this tutorial I found on the web.
The error message I am getting is
Warning: Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state.
after I click on the continue button.
I looked through multiple StackOverflow questions, which had the same error message, but none helped me to resolve my issue.
MainForm
export class MainForm extends Component {
state = {
step: 1
};
nextStep = () => {
const {step} = this.state;
this.setState({
step: step + 1
});
};
prevStep = () => {
const {step} = this.state;
this.setState({
step: step - 1
});
};
render() {
const {step} = this.state;
switch (step) {
case 1:
return (
<PatientDetails
nextStep={this.nextStep}
/>
);
case 2:
return(
<Summary
prevStep={this.prevStep()}
/>
);
default:
return(
<h1>Something went wrong, kiddo</h1>
);
}
}
}
export default MainForm
PatientDetails
export class PatientDetails extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
render() {
return (
<Form horizontal>
<Button bsStyle="primary" onClick={this.continue}>Continue</Button>
</Form>
);
}
}
export default PatientDetails;
Summary
export class Summary extends Component {
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
return (
<Form horizontal>
<Button bsStyle="primary" onClick={this.back}>Continue</Button>
</Form>
);
}
}
export default Summary;

Answer 1

As described in the comments, the warning indicates that setState is (unintentionally) being called in the middle of the render call.
Looking at your code the culprit is to be found for when you attempt to render the Summary component as the handler you pass to it, is accidentally being called since you wrote prevStep={this.prevStep()}. By removing the parentheses and writing prevStep={this.prevStep} your issue should be fixed.