Why does React weirdly display the <p> (paragraph) tag?

Question

The reaction does strange things with the <p> . Using the same markup structure, the <p> vs a <div> produces very different results. For instance,

 var withP = ( <p> withP <div /> </p> ); var withDiv = ( <div> withDiv <div /> </div> ); 

Here's what the generated markup looks like in chrome:

Here is a live jsbin demo.

Why is React render <p> different from <div> ?

Answer 1

<p> cannot have nested block elements . Chrome (not React) converts the markup to make it valid.