Unmounting React node

I’m trying to unmount a React.js node with this._rootNodeID

 handleClick: function() {

    React.unmountComponentAtNode(this._rootNodeID)

 }

But it returns false.

The handleClick is fired when I click on an element, and should unmount the root-node.

I’ve tried this as well:

  React.unmountComponentAtNode($('*[data-reactid="'+this._rootNodeID+'"]')[0])

That selector works with jQuery.hide(), but not with unmounting it, while the documentation states it should be a DOMElement, like you would use for React.renderComponent

After a few more tests it turns out it works on some elements/selectors.

It somehow works with the selector: document.getElementById('maindiv'), where maindiv is an element not generated with React.js, and just plain html. Then it returns true.

But as soon as I try and select a different ElementById that is generated with React.js it returns false. And it won’t work with document.body either, though they all essentially return the same thing if I console.log them (getElementsByClassName('bla')[0] also doesn’t work)

There should be a simple way to select the node via this, without having to resort to jQuery or other selectors, I know it’s in there somewhere…

[UXnomaan]

@gaearon – should unmountComponentAtNode be used to unmount a component that was created with React.createPortal?

[gaearon]

@amit-jamwal The node you passed there must be the same one that you previously passed to ReactDOM.render(). That’s what the warning says: you want to be unmounting the container node you renderered into, not a node managed by React that is defined in some component’s render() method. To unmount an inner node managed by React, use setState as described above.