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:

1. Render <div dangerouslySetInnerHTML={{__html: '<b>HTML</b>'}} />
2. Render <div>Text</div>
3. 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?

[adewes]

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.

[petehunt]

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