react: dangerouslySetInnerHTML doesn't properly reconcile

@sbezboro reported the following issue on IRC:

http://jsfiddle.net/vjeux/8vZ57/1/ (Both on master and 4.0)

The repro case is:

Render <div dangerouslySetInnerHTML={{__html: '<b>HTML</b>'}} />
Render <div>Text</div>
Render the same as 1)

The div has its innerHTML empty instead of <b>HTML</b>.

I don’t really know what’s going on. @jordwalke, @petehunt can you guys look at it?

About this issue

Original URL
State: closed
Created 11 years ago
Comments: 20 (7 by maintainers)

Commits related to this issue

Fix reconciling when switching to/from innerHTML There's no way that this can work if _updateDOMChildren doesn't know about dangerouslySetInnerHTML, so tell it. Fixes #377. — committed to sophiebits/react by sophiebits 11 years ago

Most upvoted comments

I know this is a very old issue but I had a similar problem and came across this.

I found that this problem occurs when you do not add a key property to the React component containing the dangerouslySetInnerHTML property. So,

<div dangerouslySetInnerHTML={{__html : markdownText}} />

does not seem to work reproducibly, whereas

<div key="some_unique_key" dangerouslySetInnerHTML={{__html : markdownText}} />

seems to. I think this could be related to React’s diffing algorithm that might not properly treat a component with a dangerouslySetInnerHTML statement if that component gets rerendered multiple times with different inner content. Just posting this here in case other people have the same issue and stumble upon this.

+12

adewes on May 10, 2015

What happens if you change step 2 to a span instead of a div? It works, right?

petehunt on Sep 27, 2013