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 a p 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>

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 a p 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>

• javascript
• reactjs

• you're embedding html in an attribute, which is not permitted. it's obviously taking the route of assuming you wanted to insert REAL html. if you want html-in-attribute, you'll have to encode it. foo="<p> hi mom </p>" – Marc B Commented Jul 10, 2015 at 19:12

1 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.