title: onClick not working inside the pop up opened via React portals
body: <p>Below is the code that I have implemented:</p>
  
  <pre><code>import React, {Component} from 'react'
  import PropTypes from 'prop-types'
  import {Link} from 'react-router'
  import {Table, Column} from '../../Layout/components/Table'
  import ReactDOM from 'react-dom'
  // import ExternalPortal from '../../Sites/components/ExternalPortal'
  
  export const TableName = 'ProjectDashboard'
  
  class MyWindowPortal extends Component {
    static propTypes = {
      children: PropTypes.node,
      closeWindowPortal: PropTypes.func
    }
  
    constructor (props) {
      super(props)
      this.containerEl = document.createElement('div') // STEP 1: create an empty div
      this.externalWindow = null
    }
  
    componentDidMount () {
      // STEP 3: open a new browser window and store a reference to it
      this.externalWindow = window.open('', '', 'width=600,height=400')
  
      // STEP 4: append the container &lt;div&gt; (that has props.children appended to it) to the body of the new window
      this.externalWindow.document.body.appendChild(this.containerEl)
  
      this.externalWindow.document.title = 'A React portal window'
      // copyStyles(document, this.externalWindow.document)
  
      // update the state in the parent component if the user closes the
      // new window
      this.externalWindow.addEventListener('beforeunload', () =&gt; {
        this.props.closeWindowPortal()
      })
    }
  
    componentWillUnmount () {
      // This will fire when this.state.showWindowPortal in the parent component becomes false
      // So we tidy up by just closing the window
      this.externalWindow.close()
    }
  
    render () {
      // STEP 2: append props.children to the container &lt;div&gt; that isn't mounted anywhere yet
      return ReactDOM.createPortal(this.props.children, this.containerEl)
    }
  }
  
  
  export default class ProjectTable extends Component {
    constructor (props) {
      super(props)
  
      this.state={showWindowPortal:false}
  
      this.toggleWindowPortal = this.toggleWindowPortal.bind(this)
      this.closeWindowPortal = this.closeWindowPortal.bind(this)
    }
  
    static propTypes = {
      data: PropTypes.object.isRequired,
      loginId: PropTypes.string.isRequired
    }
  
    componentDidMount () {
      window.addEventListener('beforeunload', () =&gt; {
        this.closeWindowPortal()
      })
    }
  
    toggleWindowPortal () {
      this.setState({showWindowPortal: !this.state.showWindowPortal})
    }
  
    closeWindowPortal () {
      this.setState({showWindowPortal: false})
    }
  
    render () {
      return (
        &lt;div&gt;
  
          &lt;div&gt;
            &lt;p&gt;This div is just for testing click here to see the portal&lt;/p&gt;
            {
              this.state.showWindowPortal &amp;&amp;
              (
                &lt;MyWindowPortal closeWindowPortal={this.closeWindowPortal}&gt;
                  &lt;button
                    onClick={() =&gt; this.closeWindowPortal()}
                  &gt;
                    Close
                  &lt;/button&gt;
                &lt;/MyWindowPortal&gt;
              )
            }
  
            &lt;button onClick={this.toggleWindowPortal}&gt;
              {this.state.showWindowPortal ? 'Close the' : 'Open a'} Portal
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>The button inside the portal doesn't trigger anything on click. It doesn't fire at all. Please note that MyWindowPortal opens a new window and the button gets rendered in that window. Tried testing it on Firefox and Chrome. I am not sure if I am doing anything wrong.</p>