Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
Solution 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.
Solution 2
You can always wrap your Material-UI Button in <ButtonGroup>
.
It helped in my case.
Related videos on Youtube
Suhail Moh
Updated on June 04, 2022Comments
-
Suhail Moh almost 2 years
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.
-
Praveen Kumar Purushothaman over 5 yearsI really don't understand the first part. Can you be a bit clear?
-
Suhail Moh over 5 yearsThanks. I just updated it.
-
Praveen Kumar Purushothaman over 5 yearsSure man...
:)
-
-
Bhojendra Rauniyar over 5 yearsCheck in the library itself if they are using somewhere or file a bug report.
-
Suhail Moh over 5 yearsThanks. I used a p tag in an inner component. that y. Now it's working properly.
-
Bhojendra Rauniyar over 5 yearsGlad, you caught it.
-
Calos over 4 yearsPlease paste code snippet in post directly, not image.