- I've been attempting to integrate Redux Form into my stepper component.
- However, I'm facing an issue where adding form fields results in them being displayed in all three sections.
- To address this, I started reviewing the code for the stepper.
- I discovered that the components are being iterated over using the map method.
- As a workaround, I tried implementing an if condition to display the div and form tags based on the label.
- Unfortunately, this approach isn't working as expected.
- Could someone guide me on how to resolve this matter?
- This will help me troubleshoot similar issues in the future.
- I have shared my code snippet and sandbox link below:
https://codesandbox.io/s/y2kjpl343z
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((label, index) => {
// Code snippets here...
})}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} className={classes.resetContainer}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={this.handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
);