Answers for "validateDOMNesting(...): <div> cannot appear as a descendant of <p>."

0

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

<Typography component={'span'} variant={'body2'}>
Posted by: Guest on June-04-2021
0

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

<p>
   <div>...</div>
</p>
//According to this document, a <p></p> tag can only contain inline elements. That means putting a <div></div> tag inside it should be improper, since the div tag is a block element. Improper nesting might cause glitches like rendering extra tags, which can affect your javascript and css.

//If you want to get rid of this warning, you might want to customize the ReactTooltip component, or wait for the creator to fix this warning.
//If you're looking for where this is happening, in console you can use:
document.querySelectorAll(" p * div ")
//Here's another version that made finding the item more verbose for me 
document.querySelectorAll("p > div")
Posted by: Guest on October-24-2021

Code answers related to "validateDOMNesting(...): <div> cannot appear as a descendant of <p>."

Code answers related to "Javascript"

Browse Popular Code Answers by Language