search

dadoagency / contentful-gatsby-components

0 stars 0 forks source link

Fixing VirtualDomNesting Error (p & div) #59

Open chesteralan opened 3 years ago

chesteralan commented 3 years ago

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

martink-rsa commented 3 years ago

Great work on this.

  1. Is it possible you could fix this styling issue before we merge?

https://www.chromatic.com/test?appId=5f43c1219b70f800227245f3&id=5fe6f43b760fa70021339240

image

  1. It's throwing an error when it's being used:

image

This is the line the error is referring to:

      return <span {...props} >{children}</span>

This is most likely because the whole of props is being spread into the span, which includes the inline prop. React is then trying to render this as a DOM attribute since it's entirely lowercase.

If you set inline to an empty string, then the error goes away e.g.

image