Switching from dangerouslySetInnerHTML to children

[kcarnold]

I tripped on a strange error when, in one state, a component uses HTML to specify children (from rendering Markdown) and in another state it uses child components (for interactive content, itself with some inner HTML). I reduced the testcase down to this: http://jsfiddle.net/BCp36/1/

[syranide]

It only happens when __html: '' is empty too.

@kcarnold It may be good to know that AFAIK the recommended way of dealing with children is div({}, child1, child2, [listOfChildren]), etc.

[kcarnold]

If __html is not empty, you don't get an exception, but the first child element goes missing: http://jsfiddle.net/BCp36/2/

If I use the way you recommend (which I'd prefer!), I get a warning: Each child in an array should have a unique "key" prop. Check the render method of undefined. e.g., http://jsfiddle.net/BCp36/3/

[sophiebits]

Thanks for reporting. I verified that #1157 doesn't fix this (even though it fixes another bug that produces the same error message).

[sophiebits]

This happens because we enqueue a removal of the children, then set the HTML before the queued removal happens. When the queue is processed, the element is missing which confuses React. If we queue the innerHTML set as well then this will be fixed.

@kcarnold As a workaround for this bug, you can assign a different key prop to each div and React will create a new element instead of reusing the existing one.

[syranide]

@spicyj Do you know if this is fixed in master? I think it is...

[sophiebits]

No, it's still broken (but it throws a slightly different error).

[steadicat]

Just spent a few hours chasing this bug down in our codebase. Would be good to fix this soon, before someone else runs into this. I can repro in all versions of React from 0.9 to 0.12. (This is what I ended up btw: http://jsfiddle.net/yw2t9hcm/)

[mattmo]

Any update on this issue? We're running into a similar problem.

[Zenwolf]

I also ran into this issue recently. I had to wrap the child in a <span> to fix the bug.

[ahmetabdi]

Issue still occurring for me

[juztinlazaro]

Hi guys, got an issue on dangerouslySetInnerHTML my problem is it decode the HTML entities but it doesn't apply the style or properties.

[jimfb]

@juztinlazaro If you believe you've found a bug in the React core, please open a new issue and provide a jsfiddle (simplified testcase/example) that demonstrates the bug.

[juztinlazaro]

@jimfb thanks sir, here's my https://jsfiddle.net/up8j9aqz/1/

[jimfb]

@juztinlazaro It doesn't decode the entities. It puts them into the markup, directly (that's what dangerouslySetInnerHTML does). The browser sees the entities and renders them as text (that's what browsers do). This is not a bug. I modified your fiddle to do what I believe you wanted: https://jsfiddle.net/b5Lt87kb/

[juztinlazaro]

@jimfb oh sorry, okay i understand now, newbie here. Okay maybe i need to decode it first before using dangerously. thanks sir.

[jimfb]

@juztinlazaro Ok, for future reference, usage questions are better answered on StackOverflow, as we try to keep github issues for tracking bugs in the React core.

[juztinlazaro]

@jimfb okay thanks sir.