How can I close my modal by clicking the close button in reactjs?

Question

How can I close my modal by clicking the close button in reactjs? My closeModal function is not working. Help me please,.! When I click the close button, the modal does not close.

When, I click on open the modal button then it is working, but when i click on close button then close button is not working. I am using the hooks in my project. Below, I have mentioned my code:

Gallery.jsx

import React, { useState } from 'react'
import "./gallery.css"
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";



const Gallery = ({ pictures, source1, source2, source3, source4, source5, source6, title }) => {
  const [clickedImg, setClickedImg] = useState(null);
  const [currentPictureIndex, setCurrentPictureIndex] = useState(0);


  const handleClick = (e, pictures, title ) => {
    setClickedImg({e, pictures, title })
    console.log("showmodal state before any click")
  };
  
  const closeModal = (e) => {
    try {
      if (e.target.classList.contains("dismiss")) {
        setClickedImg(null);
        console.log(e.target.classList.contains("dismiss"))
      }
    } catch (error) {
      console.log(error);
    }
  };

  const handleNextClick = () => {
    const nextIndex = currentPictureIndex === pictures.length - 1 ? 0 : currentPictureIndex + 1;
    setCurrentPictureIndex(nextIndex);
  };

  const handlePrevClick = () => {
      const prevIndex = currentPictureIndex === 0 ? pictures.length - 1 : currentPictureIndex - 1;
      setCurrentPictureIndex(prevIndex);
  };
  
  return (
    <div className="gallery" onClick={handleClick}>
        <div className="galleryBox1">
          <img src={source1} alt={title} className="galleryCard"/>
        </div>
        <div className="galleryBox2">
          <div className="galleryBox3">
            <div className="galleryBoxa">
              <img src={source2} alt={title} className="galleryCardTwo"/>
            </div>
            <div className="galleryBoxb">
              <img src={source3} alt={title} className="galleryCardTwo"/>
            </div>
          </div>
          <div className="galleryBox5">
            <div className="galleryBoxc">
              <img src={source4} alt={title} className="galleryCardTwo"/>
            </div>
            <div className="galleryBoxd">
              <img src={source5} alt={title} className="galleryCardTwo"/>
            </div>
          </div>
        </div>
        {
          clickedImg && (
            <div className="galleryModal dismiss" onClick={closeModal}>
                <img
                    src={pictures[currentPictureIndex]}
                    alt={title}
                    className="galleryModalImg"
                />
                <button className="galleryModalButton dismiss" onClick={closeModal}>
                    Fermer
                </button>
                {pictures.length !== 1 && (
                    <div className="galleryModalArrows" onClick={handleNextClick}>
                        <FaChevronRight className="galleryModalNext" />
                    </div>
                )}
                {pictures.length !== 1 && (
                    <div className="galleryModalArrows" onClick={handlePrevClick}>
                        <FaChevronLeft className="galleryModalPrev" />
                    </div>
                )}
            </div>
        )}
    </div>
  )
}

export default Gallery

How can I close my modal by clicking the close button in reactjs?

Answer 1

I have figured out the reason. As you have added onClick in the parent div (className="gallery") , That's why, whenever you are clicking on any button in the div it is triggering a click on the main div's handleClick method.

If you console on the handleClick and closeModal function. You will see that if you click on the close button you will see the console that is written in the handleClick() function.

So I tried to move the onClick={handleClick} from that parent div. And put it in a children div. You can put it on className="galleryBox1" this div or any other div. Then it will work fine.