Trigger a function to close a modal window in ReactJS - reactjs

Question

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 :
modal.js - Modal component
project.js - Project component
projets.js - project page
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.
Maybe there's something that I missing. I will appreciate your help.
Here is the code for the modal component :
modal.js
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) => {
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 (
<div className={`modal`}>
<div className={`modal__overlay`}
onClick={this.props.onClose}
onKeyDown = {
this.initializeEscClosing
}
tabIndex = "0"
>
</div>
<div className={`modal__container`}>
<div className={`modal__body`}>
<div className={`top`}>
<button onClick={this.props.onClose}><MdClose /></button>
</div>
<div className={`content`}>
{this.props.children}
</div>
</div>
</div>
</div>
)
}
}
Modal.propTypes = {
onClose: PropTypes.func.isRequired,
show: PropTypes.bool,
children: PropTypes.node
};
export default Modal
I noticed that when I'm pressing on ESC, the function is triggered 3 times because I have 3 projects in my .json file. How can I fix this issue ?
Here is the code for the project component :
project.js
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(
<div className="project__container">
<div className="project__preview">
<button onClick={this._toggleModal}>
{logo ? <img src={logo.src} alt={title} /> : null}
<h2>{title} <span className="category">{category}</span></h2>
</button>
</div>
<div className="project__details">
<Modal
onClose={this._toggleModal}
show={this.state.opened}
>
{image ? <img src={image.src} alt={title} /> : null}
<h3>{title} <span className="category">{category}</span></h3>
{children}
{website ? <LinkWebsite link={website}>Voir le site</LinkWebsite> : null}
</Modal>
</div>
</div>
)
}
}
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,
};
Here is the code for the project page :
projets.js
import React, { Component } from 'react'
import Link from 'gatsby-link'
import { Project } from '../components/molecules/project'
const projectPage = ({ data }) => {
return(
<div>
<h1>Projets récents</h1>
<div className="projects__container">
{data.allProjectsJson.edges.map(({ node }, i) =>
(<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}
>
<p dangerouslySetInnerHTML={{ __html: node.description }} />
</Project>),
)}
</div>
</div>
)
}
export default projectPage
export const pageQuery = graphql`
query ProjectsQuery {
allProjectsJson {
edges {
node {
title
category
description
image {
childImageSharp {
original {
src
}
}
}
logo {
childImageSharp {
original {
src
}
}
}
website
}
}
}
}
`;
Thank you in advance for taking the time to help
Wish you a great Friday,
Kind regards,
Maral

Answer 1

I think that there is something not completely correct in the initializeEscClosing() function.
Why you create a listener inside it ? onKeyDown is a listener itselfs.
Try to do something like this to trigger the event.
<div onKeyDown = {event => this.keyDownHandler(event)}/>
event prop has all the infos about the key event so in the function that handles it you could check if the key is the correct one and eventually close the modal

Answer 2

You could try using arrow functions, I don’t have a laptop handy, apologize for that, but you can try something like this
// Modal component
...
onClick={()=> {this.props.onClose()}
// Project component
onClose={() => {console.log(‘might be triggered’); this.toggleModal()}}
Using arrow functions gets rid you of binding the functions from constructors
source