Javascript – Modal opens twice when winning condition is met in React quiz game

There is no chance for any part of the code inside the component Modal to cause this bug by appearing twice. Below is the reasoning for this conclusion.

1. This component does not change the state showModal with multiple values. It means it sets the state only to one value – false.
2. This component itself is not a recursive one.

Therefore the calling site should be the only cause of failure. This component must be rendered somewhere else in the calling site besides the following statement.

  {showModal && <Modal isOpen={showModal} onClose={handleModalClose} />}

Please check again the calling site in this direction.

Please see below a sample code based on the same component. It does not have the reported issue. And it is to repeat that the only change in the below code is the calling site. The calling site below does not have rendered the component not more than once.

Please note that the state modalDismissed used in the sample code is used just for an alert to be shown, for the sake of clarity of this sample. It does not have any more relevance in the code.

App.js

import { useState, useRef, useEffect } from 'react';

export default function App() {
  const [showModal, setShowModal] = useState(false);
  const [modalDismissed, setModalDismissed] = useState(false);

  const handleModalClose = () => {
    setShowModal(false);
    setModalDismissed(true);
  };

  function handleModalShow() {
    if (modalDismissed) {
      alert('Model has been shown already once');
      return;
    }
    setShowModal(true);
  }

  return (
    <>
      <button onClick={handleModalShow}>Show Modal Once</button>
      {showModal && <Modal isOpen={showModal} onClose={handleModalClose} />}
    </>
  );
}

const Modal = ({ isOpen, onClose }) => {
  const correctAnswersCount = 0;
  const streakCounter = 0;

  const modalRef = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        onClose();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [onClose]);

  if (!isOpen) return null;
  if (correctAnswersCount >= 9) {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" ref={modalRef}>
        {correctAnswersCount > 9 && (
          <h2>Congrats! You've found all the correct answers!</h2>
        )}
        <h3>
          <b>Score</b>
        </h3>

        <div className="answer-progress-container">
          <div className="answer-progress">
            <div
              className="answer-progress-bar"
              style={{ width: `${(correctAnswersCount / 10) * 100}%` }}
            >
              {correctAnswersCount}/10
            </div>
          </div>
          <p className="streak-p">Current Streak: {streakCounter}</p>
        </div>
      </div>
      <button className="modal-close" onClick={onClose}>
        x
      </button>
    </div>
  );
};

Test run:

a) On load of the App

b) On the first click of the button

c) On dismissing the Modal by clicking the button X

d) On the second click of the button