A quick way to debug invalid dom nesting warning in React
How many times have you received an Invalid dom nesting error like the following one in React or Next.JS?
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
From the above error, it can be known that somewhere inside a <p> tag I have another <p> tag as its child and that's not allowed, so I'm getting the following error.
While the warning does provide a stack trace sometimes tracing down the element that is causing the error might give you a hard time. For example, let's look at the following error, while the error gives the element's trace where the error occurred, I wasn't able to find the error just from the stack trace because the project that I'm currently using was using `html-react-parser` library to parse HTML that was coming from the server.
The actual code that was giving me the error was:
Now I didn't notice the above code as I was looking only for the following structure in my code.
<p> <p>...</p> </p>
But then something suddenly struck me, what if I use CSS to locate the element where the error is occurring, as I have the structure of the HTML given to me on the browser console.
So I copied the elements from stack trace and wrote the following line of CSS
And Tadaa, the culprit has been caught 🔍🚨
I finally noticed where the error was occurring and then noticed the above-given code snippet. And I then that the code rendering server html that contained a <p> tag, inside of a <p> tag so I changed that <p> tag to <div> and the problem is now fixed.