CODEWITHSUNDEEP
javascriptreactjs
Nick Faulkner
Nick Faulkner

Reputation: 43

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

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>

Upvotes: 4

Views: 6888

Answers (1)

Jordan Running
Jordan Running

Reputation: 106027

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.

Upvotes: 9

Related Questions