React dangerouslySetInnerHTML Only working correctly when it is used on a div tag

Question

I've looked around and can't find any info on this. My issue is this. when i have react code like this:

<p ref="description" className="description" dangerouslySetInnerHTML={{__html: this.props.description}}></p>

and

this.props.description = "<p>this is a test</p>";

the html added via dangerouslySetInnerHTML is added under neither the description like this:

<p class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;"></p>
<p>this is a test</p>

this seems to only happen when the string passed to dangerouslySetInnerHTML contains a block level element. if the passed string is:

this.props.description = "<span>this is a test</span>";

it works correctly and outputs this:

<p class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;">
    <span>this is a test</span>
</p>    

if i change the code from so i use a div tag instead of ap tag like this:

<div ref="description" className="description" dangerouslySetInnerHTML={{__html: this.props.description}}></div>

then dangerouslySetInnerHTML works correctly with block level elements and outputs this:

<div class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;">
    <p>this is a test</p>
</div>

Answer 1

React isn't doing this, your browser is. Putting a <p> element inside another <p> element isn't valid HTML ^† , so your browser does the only thing that makes sense, which is to put the second <p> after the first.

You can see the exact same behavior in this snippet, which doesn't use any JavaScript:

 p { width: 10em; height: 1em; } #outer { border: 1px solid blue; } #inner { border: 1px solid green; } 

 <p id="outer"> <p id="inner">Hello</p> </p> 

^† In the HTML5 spec the <p> element's content model is named "Phrasing content":

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level.

Take a look at the spec for a list of elements that are valid inside a <p> element.