IE unable to render elements after state has changed

I found some issues using react-popout on IE. The main issue can be examplified by the following piece of simple code:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import domready from 'domready';
    import Popout from '../lib/react-popout.jsx';

    class AnotherCoolComponent extends React.Component {
      render() {
        return (
         <p>{this.props.sentence}</p>
        );
      }
    }

    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.popout = this.popout.bind(this);
        this.popoutClosed = this.popoutClosed.bind(this);
        this.popoutContentClicked = this.popoutContentClicked.bind(this);
        this.showSomething = this.showSomething.bind(this);
        this.state = {
          isPoppedOut: false,
          showSomething: false,
        };
      }

      popout() {
        this.setState({isPoppedOut: true});
      }

      popoutClosed() {
        this.setState({isPoppedOut: false});
      }

      showSomething() {
        this.setState({
          showSomething: !this.state.showSomething
        });
      }

      popoutContentClicked() {
        this.popoutClosed();
      }

      render() {
        if (this.state.isPoppedOut) {
          return (
            <Popout title='Test' onClosing={this.popoutClosed}>
              <div>
                <button onClick={this.popoutContentClicked}>Close</button>
                <button onClick={this.showSomething}>Click here to show something</button>
                {this.state.showSomething && <AnotherCoolComponent sentence="testing" />}
              </div>
            </Popout>
          );
        } else {
          return (
            <a onClick={this.popout}>(pop window out)</a>
          );
        }
      }
    }

    domready(() => {
      var container = document.createElement('div');
      document.body.appendChild(container);
      ReactDOM.render(<Example />, container);
    });

When a change on the state of the component inside the popout causes a new component to be rendered, React for some reason, is unable to render it and throws errors:

It's not possible to get property "firstChild" of undefined reference or null

[lucaspin]

This issue is from React, and was fixed on version 15.0 (https://github.com/facebook/react/issues/5755)

[bigassdragon]

I struggled with this for a very long time.

To my understanding it seems like IE is expecting the DOM to have the same tree on a child component. So if you have a div with some data in it, it is going to expect the same tree to exist but you can empty that out if you want.

I have not exactly found a great way to fix it, but my first pass at it was making the update function unmountComponentAtNode only for IE. Doing this caused a flicker to happen because of the constant unmounting.

I have yet to find a better solution in the mean time. If anyone has any ideas that could help me make this better I can do so and do a pull request if needed.