Code change:
_updateDOMChildren: function(lastProps, transaction) { var nextProps = this.props; <del> var lastUsedContent = </del> <ins> var lastContent = </ins> CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null; <del> var contentToUse = </del> <ins> var nextContent = </ins> CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null; <ins> var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html; var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html; </ins> // Note the use of `!=` which checks for null or undefined. <ins> var lastChildren = lastContent != null ? null : lastProps.children; var nextChildren = nextContent != null ? null : nextProps.children; </ins> <del> var lastUsedChildren = lastUsedContent != null ? null : lastProps.children; var childrenToUse = contentToUse != null ? null : nextProps.children; </del> <ins> // If we're switching from children to content/html or vice versa, remove // the old content var lastHasContentOrHtml = lastContent != null || lastHtml != null; var nextHasContentOrHtml = nextContent != null || nextHtml != null; if (lastChildren != null && nextChildren == null) { this.updateChildren(null, transaction); } else if (lastHasContentOrHtml && !nextHasContentOrHtml) { this.updateTextContent(''); } </ins> <del> if (contentToUse != null) { var childrenRemoved = lastUsedChildren != null && childrenToUse == null; if (childrenRemoved) { this.updateChildren(null, transaction); } if (lastUsedContent !== contentToUse) { this.updateTextContent('' + contentToUse); </del> <ins> if (nextContent != null) { if (lastContent !== nextContent) { this.updateTextContent('' + nextContent); </ins> } <del> } else { var contentRemoved = lastUsedContent != null && contentToUse == null; if (contentRemoved) { this.updateTextContent(''); </del> <ins> } else if (nextHtml != null) { if (lastHtml !== nextHtml) { ReactComponent.DOMIDOperations.updateInnerHTMLByID( this._rootNodeID, nextHtml ); </ins> } <del> this.updateChildren(flattenChildren(nextProps.children), transaction); </del> <ins> } else if (nextChildren != null) { this.updateChildren(flattenChildren(nextChildren), transaction); </ins> } },

Related discussion:
text: I have this issue, but can't reproduce in a simple example - my original code is layered and I think that's the reason the real DOM doesn't reconcile. In the react debugger is looks as dangerouslySetInnerHTML has proper __html value, but it doesn't equeal to the innerHTML of the actual element. I used an extremely simple (and equally nasty) workaround. Writing it here just in case it will help someone:
Reading out will rarely give you what you put in because the browser does various kinds of normalization on it. If you can repro with a standalone example though I'm happy to take a look.
well, that's more like a control shot :-)
Looks like the issue still exist in 16.4.1 when using on a tag, you cannot nest other or . issue is fixed by replacing the container with a
If you experience something similar three years later, and the original issue is closed, you can be sure it's a different unrelated issue. :-) Please file a new one. We don't keep track of closed issues so your feedback is unfortunately going into the void. When filing a new issue, please provide a reproducing example. when using dangerouslySetInnerHTML on a tag, you cannot nest other or This sounds like browsers work. You can't nest into . This is why React warns when you do it (except in which case React can't validate it).