title: I have my modal component in a different file and I'm trying to open it from another component
body: <p><strong>BuySectionItem.js</strong></p>
  
  <pre><code>    class BuySectionItem extends React.PureComponent {
          constructor( props ) {
              super( props );
  
              this.state = {
                  modalIsOpen:        false,
              }
              this.toggleTicketModal = this.toggleTicketModal.bind( this );
          }
  
          toggleTicketModal = () =&gt; {
              this.setState( { modalIsOpen: ! this.state.modalIsOpen } );
          }
  
          componentDidMount() {
              // this.setActivePrice();
          }
  
          outputBuyButton( offer ) {
              // Universe ID override is present.
  
                  return  &lt;Button text="Buy Ticket" type="green-gradient" onClick={ this.toggleTicketModal }/&gt;
  
              return null;
          }
  
          render() {
              &lt;div&gt;
                  {this.state.modalIsOpen &amp;&amp;
                      &lt;TicketModal isOpen={this.state.modalIsOpen} toggleTicketModal={ this.toggleTicketModal } /&gt;
                  }
              &lt;/div&gt;;
          }
      }
  
      export default BuySectionItem;
  </code></pre>
  
  <p><strong>TicketModal.js</strong></p>
  
  <pre><code>    import React from 'react';
      import Modal from 'react-modal';
      import PropTypes from 'prop-types';
  
      const customStyles = {
          content: {
              top:         '50%',
              left:        '50%',
              right:       'auto',
              bottom:      'auto',
              marginRight: '-50%',
              transform:   'translate(-50%, -50%)',
          },
      };
  
      Modal.setAppElement( 'body' )
  
      class TicketModal extends React.Component {
  
  componentDidMount() {
          this.handleKeyEvents();
      }
  
      componentWillUnmount() {
          this.removeKeyHandler();
      }
  
      /**
       * Watch for the escape key when the modal is open to allow users to escape from the modal.
       */
      handleKeyEvents() {
          const handleKeyDown = event =&gt; {
              if ( event.keyCode === 27 ) {
                  this.props.toggleTicketModal( event );
              }
          };
  
          /*
           * Attach our event listener to the window.
           */
          window.addEventListener( 'keydown', handleKeyDown );
  
          /*
           * Cancel the key event handling, and remove
           */
          this.removeKeyHandler = () =&gt; {
              window.removeEventListener( 'keydown', handleKeyDown );
          };
      }
      render() {
              const {
                  isOpen,
                  // pending,
                  toggleTicketModal,
              } = this.props;
              return (
            &lt;Modal
            isOpen={isOpen}
            onRequestClose={toggleTicketModal()}
            style={customStyles}
            contentLabel="Meal Modal"
            &gt;
              &lt;div className="modal-wrapper"&gt;
                &lt;div className="container text-center"&gt;
                  &lt;h1&gt;Hello&lt;/h1&gt;
                  &lt;h2&gt;ID of this modal is 100&lt;/h2&gt;
                  &lt;h3&gt;This is an awesome modal.&lt;/h3&gt;
                  &lt;button onClick={toggleTicketModal()}&gt;close&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/Modal&gt;
              )
          }
      }
      TicketModal.propTypes = {
          pending:           PropTypes.bool,
          toggleTicketModal: PropTypes.func,
          isOpen:            PropTypes.bool,
      };
  
      export default TicketModal;
  
  
  As you can see I am trying to open the ticket modal component from the `buysectionitem` component on a button Click.
  
  But for some reason the Modal doesn't seem to be opening.
  
  When I kept a break point I see that the `togglemodal` function is being called but doesn't open at all.
  </code></pre>
  
  <p>I added some more code as I need guidance with the handle key events as well. This key event which was supposed to remove the modal from the screen when I click escape which doesn't seem to be working.</p>