dangerouslySetInnerHTML doesn't properly reconcile

[vjeux]

@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?

[brianr]

One other tidbit: this only seems to happen when the __html value is exactly the same in step 3 as it was in step 1. If it's different (i.e. '<b>html 2</b>'), things work as expected.

[petehunt]

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

[vjeux]

I just reduced the test case to 19 lines.

[vjeux]

@petehunt: yeah changing 2) to use a span works as expected

[petehunt]

If anyone wants to look into this, the bug is probably here https://github.com/facebook/react/blob/master/src/core/ReactNativeComponent.js#L280

[vjeux]

@brianr: I cannot reproduce what you are seeing: http://jsfiddle.net/vjeux/FwvMt/ It also bugs if I use a different string

[brianr]

@vjeux I'm not able to reproduce that particular behavior given this small repro case. The original code had several more layers... will keep trying.

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

[cdujeu]

thx @adewes you saved my day :-)