Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> - css

Question

I know the what the problem is. But I can't find out a solution. a paragraph cannot contain any other tags. But in my case ,I didn't use any paragraph tags.
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map(label => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
);
})}
</Stepper>
<div>
{this.state.activeStep === steps.length ? (
<div>
<div>All steps completed</div>
<Button onClick={this.handleReset}>Reset</Button>
</div>
) : (
<div>
<div>{getStepContent(activeStep)}</div>
<div>
<Button
disabled={activeStep === 0}
onClick={this.handleBack}
className={classes.backButton}
>
Back
</Button>
<Button variant="contained" color="primary" onClick={this.handleNext}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
}
My getStep method .. it looks like returning a paragraph. But it should return a component of react..
function getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return <FormPart1 setFormPart1Value={getValueFormPart1.bind(this)} className={{
alignContent:'center'
}
} />;
case 1:
return <FormPart2 />;
case 2:
return <PerformanceTable />;
case 3:
return <WorkHabitTable />;
case 4:
return <OtherDetails />;
case 5:
return <PerformanceOverall />;
default:
return 'Uknown stepIndex';
}
This code is taken from Material-UI directly. So anyone suggests me a solution to get rid of the wrong appearing in the browser.

Answer 1

The warning message states that you cannot use div tag inside the p tag like:
<p>
<div>some text</div>
</p>
This is invalid html. The p tag can contain inline elements not block level elements.
So, one of your component is using such. You need to fix that. (Simply replace p tag with div tag)
Or, the library itself might have used such? You may fix by your own or wait for the fixes by submitting an issue.

Answer 2

You can always wrap your Material-UI Button in <ButtonGroup>.
It helped in my case.
<ButtonGroup
orientation="vertical"
color="primary"
aria-label="vertical outlined primary button group"
>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>