div cannot appear as a descendant of p

Question

I m seeing this  It s not a mystery what it is complaining about   Warning  validateDOMnesting        lt div gt  cannot appear as a descendant of  lt p gt   See     SomeComponent  gt  p  gt       gt  SomeOtherComponent  gt  ReactTooltip  gt  div    I m the author of SomeComponent and SomeOtherComponent  But the latter is using an external dependency  ReactTooltip from react-tooltip   It s probably not essential that this is an external dependency  but it lets me try the argument here that it is  some code that s out of my control    How worried should I be about this warning  given that the nested component is working just fine  seemingly   And how would I go about changing this anyway  provided I don t want to re-implement an external dependency   Is there maybe a better design that I m yet unaware of   For completeness sake  here s the implementation of SomeOtherComponent  It just renders this props value  and when hovered  a tooltip that says  Some tooltip message    class SomeOtherComponent extends React Component     constructor props        super props         render         const  value     rest    this props      return  lt span className  some-other-component  gt         lt a href     data-tip  Some tooltip message      rest  gt  value  lt  a gt         lt ReactTooltip   gt       lt  span gt          Thank you

User · Answer

Your component might be rendered inside another component (such as a <Typography> ... </Typography>). Therefore, it will load your component inside a <p> .. </p> which is not allowed.

Fix: Remove <Typography>...</Typography> because this is only used for plain text inside a <p>...</p> or any other text element such as headings.

User · Answer

If you are using ReactTooltip  to make the warning disappear  you can now add a wrapper prop with a value of span  like this    lt ReactTooltip wrapper  span    gt    Since the span is an inline element  it should no longer complain

User · Answer

I had a similar issue and wrapped the component in  div  instead of  p  and the error went away

User · Answer

I got this warning by using Material UI components  then I test the component  div  as prop to the below code and everything became correct   import Grid from   material-ui core Grid   import Typography from   material-ui core Typography     lt Typography component  span  gt     lt Grid component  span  gt      Lorem Ipsum    lt  Grid gt   lt  Typography gt    Actually  this warning happens because in the Material UI the default HTML tag of Grid component is div tag and the default Typography HTML tag is p tag  So now the warning happens    Warning  validateDOMnesting        lt div gt  cannot appear as a descendant of  lt p gt

User · Answer

Based on the warning message  the component ReactTooltip renders an HTML that might look like this    lt p gt      lt div gt     lt  div gt   lt  p gt    According to this document  a  lt p gt  lt  p gt  tag can only contain inline elements  That means putting a  lt div gt  lt  div gt  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

User · Answer

If this error occurs while using Material UI  lt Typography gt  https   material-ui com api typography   then you can easily change the  lt p gt  to a  lt span gt  by changing the value of the component attribute of the  lt Typography gt  element     lt Typography component   span   variant   body2   gt    According to the typography docs      component   The component used for the root node  Either a string to use a DOM element or a component  By default  it maps the variant to a good default headline component    So Typography is picking  lt p gt  as a sensible default  which you can change  May come with side effects     worked for me

User · Answer

I got this error when using Chakra UI in React when doing inline styling for some text  The correct way to do the inline styling was using the span element  as others also said for other styling frameworks  The correct code   lt Text as  quot span quot  fontWeight  quot bold quot  gt      Bold text      lt Text display  quot inline quot  fontWeight  quot normal quot  gt normal inline text lt  Text gt   lt  Text gt

User · Answer

The warning appears only because the demo code has  function TabPanel props      const   children  value  index     other     props     return        lt div       role  quot tabpanel quot        hidden  value     index        id   simple-tabpanel-  index          aria-labelledby   simple-tab-  index              other       gt         value     index  amp  amp             lt Box p  3  gt       lt   NOTE P TAG HERE            lt Typography gt  children  lt  Typography gt           lt  Box gt                lt  div gt          Changing it like this takes care of it  function TabPanel props        const  children  value  index  classes     other    props       return            lt div             role  quot tabpanel quot              hidden  value     index              id   simple-tabpanel-  index                aria-labelledby   simple-tab-  index                    other           gt               value     index  amp  amp                     lt Container gt                       lt Box gt        lt    P TAG REMOVED                          children                       lt  Box gt                   lt  Container gt                          lt  div gt

User · Answer

This is a constraint of browsers  You should use div or article or something like that in the render method of App because that way you can put whatever you like inside it  Paragraph tags are limited to only containing a limited set of tags  mostly tags for formatting text  You cannot have a div inside a paragraph      lt p gt  lt div gt  lt  div gt  lt  p gt    is not valid HTML  Per the tag omission rules listed in the spec  the  lt p gt  tag is automatically closed by the  lt div gt  tag  which leaves the  lt  p gt  tag without a matching  lt p gt   The browser is well within its rights to attempt to correct it by adding an open  lt p gt  tag after the  lt div gt     lt p gt  lt  p gt  lt div gt  lt  div gt  lt p gt  lt  p gt    You can t put a  lt div gt  inside a  lt p gt  and get consistent results from various browsers  Provide the browsers with valid HTML and they will behave better   You can put  lt div gt  inside a  lt div gt  though so if you replace your  lt p gt  with  lt div class  p  gt  and style it appropriately  you can get what you want

User · Answer

If you re looking for where this is happening  in console you can use  document querySelectorAll   p   div

User · Answer

I got this from using a custom component inside a  lt Card Text gt  section of a  lt Card gt  component in React  None of my components were in p tags

[reactjs] <div> cannot appear as a descendant of <p>

Examples related to reactjs