What this error mean? How to fix that?

ReactMount: Root element has been removed from its original container. New container

After this I get this:

Uncaught object react.js:15915
invariant react.js:15915
ReactMount.findComponentRoot react.js:10584
ReactMount.findReactNodeByID react.js:10480
getNode react.js:10089
(anonymous function) react.js:7307
(anonymous function) react.js:11403
processQueue react.js:10856
ReactMultiChild.Mixin.updateChildren react.js:10970
ReactDOMComponent.Mixin._updateDOMChildren react.js:7007
(anonymous function) react.js:6860
(anonymous function) react.js:11403
ReactComponent.Mixin._performUpdateIfNecessary react.js:4409
ReactComponent.Mixin.receiveComponent react.js:4380
ReactDOMComponent.Mixin.receiveComponent react.js:6833
(anonymous function) react.js:5963
(anonymous function) react.js:11403
ReactCompositeComponentMixin._performComponentUpdate react.js:5899
ReactCompositeComponentMixin._performUpdateIfNecessary react.js:5842
Mixin.perform react.js:14266
ReactComponent.Mixin.performUpdateIfNecessary react.js:4390
ReactCompositeComponentMixin.performUpdateIfNecessary react.js:5792
enqueueUpdate react.js:12731
ReactCompositeComponentMixin.replaceState react.js:5676
ReactCompositeComponentMixin.setState react.js:5655
(anonymous function) posts.js:273
j jquery-1.11.1.min.js:2
k.fireWith jquery-1.11.1.min.js:2
x jquery-1.11.1.min.js:4
b

When I get those problems I'm trying to update my view with a new list of items. To update my current view I call updatePosts():

var updatePosts = function () {
    var content = document.querySelector('.content');
    content.innerHTML = '';
    $refresh.addClass('fa-spin');
    return React.renderComponent(
        <Posts />,
        content
    );
};

Can be this innerHTML = '' the problem? I'll render my Posts ponent entire again.

What this error mean? How to fix that?

ReactMount: Root element has been removed from its original container. New container

After this I get this:

Uncaught object react.js:15915
invariant react.js:15915
ReactMount.findComponentRoot react.js:10584
ReactMount.findReactNodeByID react.js:10480
getNode react.js:10089
(anonymous function) react.js:7307
(anonymous function) react.js:11403
processQueue react.js:10856
ReactMultiChild.Mixin.updateChildren react.js:10970
ReactDOMComponent.Mixin._updateDOMChildren react.js:7007
(anonymous function) react.js:6860
(anonymous function) react.js:11403
ReactComponent.Mixin._performUpdateIfNecessary react.js:4409
ReactComponent.Mixin.receiveComponent react.js:4380
ReactDOMComponent.Mixin.receiveComponent react.js:6833
(anonymous function) react.js:5963
(anonymous function) react.js:11403
ReactCompositeComponentMixin._performComponentUpdate react.js:5899
ReactCompositeComponentMixin._performUpdateIfNecessary react.js:5842
Mixin.perform react.js:14266
ReactComponent.Mixin.performUpdateIfNecessary react.js:4390
ReactCompositeComponentMixin.performUpdateIfNecessary react.js:5792
enqueueUpdate react.js:12731
ReactCompositeComponentMixin.replaceState react.js:5676
ReactCompositeComponentMixin.setState react.js:5655
(anonymous function) posts.js:273
j jquery-1.11.1.min.js:2
k.fireWith jquery-1.11.1.min.js:2
x jquery-1.11.1.min.js:4
b

When I get those problems I'm trying to update my view with a new list of items. To update my current view I call updatePosts():

var updatePosts = function () {
    var content = document.querySelector('.content');
    content.innerHTML = '';
    $refresh.addClass('fa-spin');
    return React.renderComponent(
        <Posts />,
        content
    );
};

Can be this innerHTML = '' the problem? I'll render my Posts ponent entire again.

• javascript
• reactjs

• 1 Why would you set the innerhtml to empty? React is already taking care of DOM manips – Hugo Dozois Commented Jul 16, 2014 at 12:38

1 Answer 1

Remove this line

content.innerHTML = '';

React will look at the old virtual dom, and what's returned by <Posts /> (which is the same as Posts()). It'll pare them, and make the updates required to the DOM.