title: Remove a React component from the DOM
body: <p>I have this piece of code (which I've simplified for posting here) that creates a component and renders it</p>
  
  <pre><code>        const getComponentToRender = (user, path) =&gt; {
            switch(path ){
              case 'ChangePassword':
                return &lt;ChangePassword user={ user } /&gt;;
              case 'NewPassword':
                return &lt;NewPassword user={ user } /&gt;;
              case 'PasswordExpire':
                return &lt;PasswordExpire user={ user } /&gt;;
              default:
                return null;
            }
           }
  
          class UserAdmin extends React.Component {  
            static propTypes = {
              user: PropTypes.object.isRequired
            };
            render() {
              const component = getComponentToRender(this.props.user, 'ChangePassword' );          
              return(
                  &lt;div id='user-admin-wrapper'&gt;
                    {component}
                  &lt;/div&gt;
                )
  
            }  
            componentWillUnmount(){
  
            }
         }
  </code></pre>
  
  <p>When I navigate away from UserAdmin the <code>componentWillUnmount</code> gets called.</p>
  
  <p>Q: What is the simplest way to actually remove the component <code>ChangePassword</code> or any other component (by its name) from the DOM when <code>componentWillUnmount</code> executes.
  <strong>OR</strong>, removing the component at any point, without waiting for <code>componentWillUnmount</code></p>
  
  <p>Using react-dom 15.6.1 . btw</p>