title: Trigger a function to close a modal window in ReactJS
body: <p>I'm creation my portfolio section in ReactJS with Gatsby and I have some trouble to handle KeyDown.
  My code permits me to detect when I'm pressing on ESC key but I can't trigger the close function as I did for the overlay (onClick event).
  I have three differents files :</p>
  
  <ul>
  <li><code>modal.js</code> - Modal component  </li>
  <li><code>project.js</code> - Project component</li>
  <li><code>projets.js</code> - project page</li>
  </ul>
  
  <p>I create the modal window which will display the details of the project. The project component will display all the project thumbnails and finally the project page will render the Project Component.</p>
  
  <p>Maybe there's something that I missing. I will appreciate your help.</p>
  
  <p>Here is the code for the modal component :
  <strong>modal.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import { Link } from 'gatsby-link'
  import './modal.scss'
  import MdClose from 'react-icons/lib/md/close'
  export class Modal extends Component {
      constructor(props) {
          super(props)
  
      }
  
      componentDidMount() {
          this.initializeEscClosing();
      }
  
      initializeEscClosing() {
          if (typeof window !== 'undefined') {
              window.addEventListener('keydown', (e) =&gt; {
                  if (e.which == 27) {
                      //this.props.onClose
                      console.log('It\'s working')
                  }
              });
          }
      }
  
  
      render() {
  
  
          // Render nothing if the "show" prop is false
  
          if (!this.props.show) {
              return null;
          }
  
          return (
              &lt;div className={`modal`}&gt;
                  &lt;div className={`modal__overlay`}
                      onClick={this.props.onClose}
                      onKeyDown = {
                        this.initializeEscClosing
                      }
                      tabIndex = "0"
  
  
                  &gt;
                  &lt;/div&gt;
                  &lt;div className={`modal__container`}&gt;
  
                      &lt;div className={`modal__body`}&gt;
                          &lt;div className={`top`}&gt;
                              &lt;button onClick={this.props.onClose}&gt;&lt;MdClose /&gt;&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className={`content`}&gt;
                              {this.props.children}
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          )
      }
  }
  Modal.propTypes = {
      onClose: PropTypes.func.isRequired,
      show: PropTypes.bool,
      children: PropTypes.node
  };
  
  export default Modal
  </code></pre>
  
  <p>I noticed that when I'm pressing on <code>ESC</code>, the function is triggered 3 times because I have 3 projects in my <code>.json</code> file.  How can I fix this issue ?</p>
  
  <p>Here is the code for the project component :</p>
  
  <p>project.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import {Link} from 'gatsby-link'
  import './project.scss'
  import {LinkWebsite, ButtonProject} from '../../../components/atoms/button'
  
  
  import {Modal } from '../modal'
  
  
  export class Project extends Component {
      constructor(props){
          super(props)
          this.state = {
              opened:false
          }
       this._toggleModal = this._toggleModal.bind(this)
  
      }
      _toggleModal(){   
        this.setState({
            opened: !this.state.opened
        })
      }
  
      render(){
          const { title, category, image, logo, children, website} = this.props
  
          return(
             &lt;div className="project__container"&gt;
                  &lt;div className="project__preview"&gt;
                      &lt;button onClick={this._toggleModal}&gt;
                      {logo ? &lt;img src={logo.src} alt={title} /&gt; : null}
                      &lt;h2&gt;{title} &lt;span className="category"&gt;{category}&lt;/span&gt;&lt;/h2&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div className="project__details"&gt;
                      &lt;Modal 
                          onClose={this._toggleModal}
                          show={this.state.opened}
                      &gt;
  
                                  {image ? &lt;img src={image.src} alt={title} /&gt; : null}
                                  &lt;h3&gt;{title} &lt;span className="category"&gt;{category}&lt;/span&gt;&lt;/h3&gt;
  
  
                                  {children}
  
  
                                  {website ? &lt;LinkWebsite link={website}&gt;Voir le site&lt;/LinkWebsite&gt; : null}
  
  
                      &lt;/Modal&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
          )
      }
  
  }
  export default Project
  
  Project.propTypes = {
      title: PropTypes.string.isRequired,
      category: PropTypes.string.isRequired,
      image: PropTypes.shape({
          src: PropTypes.string.isRequired,
          alt: PropTypes.string.isRequired,
      }).isRequired,
      logo: PropTypes.shape({
          src: PropTypes.string.isRequired,
          alt: PropTypes.string.isRequired,
      }).isRequired,
      children: PropTypes.element.isRequired,
      website: PropTypes.string,
  };
  
  Project.defaultProps = {
      title: 'Nom du projet',
      image: null,
      logo: null,
      children: 'Texte introductif du projet. Il fourni les éléments clés',
      website: null,
  };
  </code></pre>
  
  <p>Here is the code for the project page :</p>
  
  <p>projets.js</p>
  
  <pre><code>    import React, { Component } from 'react'
  import Link from 'gatsby-link'
  import { Project } from '../components/molecules/project'
  
  const projectPage = ({ data }) =&gt; {
  
      return(
        &lt;div&gt;
          &lt;h1&gt;Projets r&amp;eacute;cents&lt;/h1&gt;
        &lt;div className="projects__container"&gt;
  
              {data.allProjectsJson.edges.map(({ node }, i) =&gt;
                         (&lt;Project
                             key={i}
                             title={node.title}
                             category={node.category}
                             image={{
                                 src: node.image.childImageSharp.original.src,
                                 alt: node.title,
                             }}
                            logo={{
                              src: node.logo.childImageSharp.original.src,
                              alt: node.title,
                            }}
                             website={node.website}
                         &gt;
                             &lt;p dangerouslySetInnerHTML={{ __html: node.description }} /&gt;
                         &lt;/Project&gt;),
                     )}
  
              &lt;/div&gt;
              &lt;/div&gt;
          )
  
  
  
  }
  
  export default projectPage
  
  export const pageQuery = graphql`
  query ProjectsQuery {
    allProjectsJson {
      edges {
        node {
          title
          category
          description
          image {
            childImageSharp {
              original {
                src
              }
            }
          }
          logo {
            childImageSharp {
              original {
                src
              }
            }
          }
          website
        }
      }
    }
  }
  `;
  </code></pre>
  
  <p>Thank you in advance for taking the time to help
  Wish you a great Friday,</p>
  
  <p>Kind regards,
  Maral</p>