title: How can I unmount and remount a component in react?
body: <p>I have a component and surrounded it with an error boundary. </p>
  
  <pre><code>&lt;ErrorBoundary&gt;
     &lt;ChildComponent /&gt;
  &lt;/ErrorBoundary&gt;
  </code></pre>
  
  <p>It looks like this inside the <code>&lt;ErrorBoundary /&gt;</code>: </p>
  
  <pre><code>export class ErrorBoundary extends React.Component {
      constructor() {
          super();
      }
  
      static getDerivedStateFromError(error) {
      }
  
      componentDidCatch(err, info) {
          console.log('error is caught in the errorbound')
      }
  
      componentDidUpdate(prevProps) {
          if (prevProps.errorSwitch === this.props.errorSwitch) return;
          console.log('there was an error in the parent component')
          this.forceUpdate()
      }
  
      render() {
          return this.props.children
      }
  }
  </code></pre>
  
  <p>How can I force <code>this.props.children</code> (the child component) to 1) unmount, then 2) remount, again? </p>
  
  <p>I'm not looking for how to re-render with new props, as <a href="https://stackoverflow.com/questions/49186927/react-unmount-and-remount-child-component">this</a> answer shows how to do.  I specifically want to unmount and remount. </p>