Why does React strangely render the <p> (paragraph) tag?

Question

React is doing strange things with the <p> tag. Using the same markup structure, with a <p> tag vs a <div> tag produces very different results. For example,

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

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

Here is what the generated markup looks like in chrome:

Here is a live jsbin demo.

Why does React render <p> differently than <div>?

Answer 1

<p> can not have nested block elements. Chrome (not React) is transforming the markup to make it valid.