How to properly unmount an element (block) in react.js?

Question

React

The documentation says that componentWillUnmount is fired before the element is unmounted from the DOM. But how do you unmount the element?
Simply put, I need to replace one element with another, which are tied to the same id, or simply delete the element.
How to do it competently so that componentWillUnmount would be triggered on an element that is removed from the DOM?

Answer 1

Don't render the component, then React will remove it from the DOM.

render() {
  let component = true ? <Comp1 /> : <Comp2 />;
  return (
    <div>{component}</div>
  );
}

Answer 2

Let's say you first created a component and rendered it on the page like this:
Later, you can remove it from the DOM tree, plus React will clean up all event handlers on its own like this:
facebook.github.io/react/docs/top-level-api.html#r...