index.js:1 Warning: validateDOMNesting(...): <h6> cannot appear as a descendant of <p>.
index.js:1 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
index.js:1 Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <p>.
What is the cause of these errors?
index.js:1 Warning: validateDOMNesting(...): <h6> cannot appear as a descendant of <p>.
index.js:1 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
index.js:1 Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <p>.
What is the cause of these errors?
Share Improve this question edited Nov 25, 2020 at 3:35 Obsidian Age 42.5k11 gold badges53 silver badges76 bronze badges asked Nov 25, 2020 at 3:27 MelisMelis 411 silver badge3 bronze badges3 Answers
Reset to default 3<p> is used to denote a paragraph of text, and it makes no logical sense to include a heading, list or form inside of a paragraph. As such, <h6>, <ul> and <form> are not valid children of the <p> tag. The only permitted content for <p> tags is phrasing content.
The only phrasing content (and the only valid children of the <p> tag) are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <mand> (obsolete), <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen> (obsolete), <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, , <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
you may have called mui Typography control without variant somewhere which is converted as a P tag on DOM render. either give variant or remove Typography control, it applicable for all.
Find elemnt by run this code in console
document.querySelectorAll(" p * ul ")
<CustomElement tag={"p"} />
// OR
<Text as="p" />
change with
<CustomElement tag={"div"} />
// OR
<Text as="div" />