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