title: How to Close and Unmount Bootstrap Modal with React.js Portals
body: <p>I am creating a modal to activates onClick from a row in a table. The modal will appear and display all the data that the table row contains. I have been able to get the modal to appear but I cannot close it after it mounts.</p>
  
  <p>I thought the state was not updating because setState need a callback function to trigger it immediately but that does not work for me.</p>
  
  <pre><code>// Modal.js
  import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  
  const modalRoot = document.getElementById('modal-root');
  
  class Modal extends React.Component {
      el = document.createElement('div');
  
      componentDidMount() {
          modalRoot.appendChild(this.el);
      }
  
      componentWillUnmount() {
          modalRoot.removeChild(this.el);
      }
  
      render() {
          // Use a portal to render the children into the element
          return ReactDOM.createPortal(
              &lt;div className="modal fade show" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-keyboard="false" data-backdrop="static" style={{display: 'block'}} aria-modal="true"&gt;
                  &lt;div className="modal-dialog" role="document"&gt;
                      &lt;div className="modal-content"&gt;
                          &lt;div className="modal-header"&gt;
                              &lt;h5 className="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt;
                                  &lt;button onClick={ this.handleHide } type="button" className="close" aria-label="Close"&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;div className="modal-body"&gt;
                              { this.props.children }
                          &lt;/div&gt;
                          &lt;div className="modal-footer"&gt;
                              &lt;button onClick={ this.props.onClose } type="button" className="btn btn-secondary"&gt;Close&lt;/button&gt;
                              &lt;button type="button" className="btn btn-primary"&gt;Save changes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;,
          this.el);
      }
  }
  
  export default Modal
  
  // FlightLogSummary.js
  import React, { Component } from 'react'
  import Modal from '../layout/Modal'
  
  class FlightLogSummary extends React.Component {
      state = {showModal: false}
  
      handleShow = () =&gt; {
          this.setState({showModal: true});
      }
  
      handleHide = () =&gt; {
          this.setState({showModal: false});
      }
  
      render() {
          const { flightLog } = this.props
  
          const modal = this.state.showModal ? (
              &lt;Modal&gt;
                  Modalidy
              &lt;/Modal&gt;
          ) : null;
  
          return (
              &lt;tr onClick={ this.handleShow }&gt;
                  &lt;th scope="row"&gt;{ flightLog.flightDate }&lt;/th&gt;
                  &lt;td&gt;{ flightLog.flightRoute }&lt;/td&gt;
                  &lt;td&gt;{ flightLog.flightAircraft }&lt;/td&gt;
                  &lt;td className="text-right"&gt;{ flightLog.flightTotal }&lt;/td&gt;
                  { modal }
              &lt;/tr&gt;
          )
      }
  }
  
  export default FlightLogSummary;
  </code></pre>
  
  <p>The modal should be triggered by the onClick on the row. The modal should appear. When the close button for the modal is clicked it should disappear.</p>