React Modal not closing via OnClick

Question

I've set an onClick method to close the React Modal but it's not changing state. I believe there may be an issue with the openModalTwo, setOpenModalTwo but I'm not sure sure.

Here is my code:

import { Avatar } from "@material-ui/core";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { selectUser } from "../features/userSlice";
import "../style/QuestionBox.css";
import Modal from "react-modal";
import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
import { ExpandMore } from "@material-ui/icons";
import { Input } from "@material-ui/core";
import LinkIcon from "@material-ui/icons/Link";
import db from "../firebase";
import firebase from "firebase";

function QuestionBox() {
  const user = useSelector(selectUser);
  const [openModalTwo, setOpenModalTwo] = useState(false);
  const [input, setInput] = useState("");
  const [inputUrl, setInputUrl] = useState("");

  const handleQuestion = (e) => {
    e.preventDefault();

    db.collection("questions").add({
      question: input,
      imageUrl: inputUrl,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      user: user,
    });

    setInput("");
    setInputUrl("");

    setOpenModalTwo(false);
  };

  return (
    <div className="questionBox" onClick={() => setOpenModalTwo(true)}>
      <div className="questionBox__info">
        <Avatar src={user.photo} />
        <h5>{user.displayName}</h5>
      </div>
      <div className="questionBox__question">
        <p>Where do I start?</p>
      </div>

      <Modal
        isOpen={openModalTwo}
        onRequestClose={() => setOpenModalTwo(false)}
        shouldCloseOnOverlayClick={false}
        style={{
          overlay: {
            width: 700,
            height: 600,
            backgroundColor: "transparent",
            boxShadow:
              "box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);",
            zIndex: "1000",
            top: "50%",
            left: "50%",
            marginTop: "-300px",
            marginLeft: "-350px",
          },
        }}
      >
        <div className="modal__title">
          <h5>Add Question Here</h5>
          <h5>Share Your Question</h5>
        </div>
        <div className="modal__info">
          <Avatar Avatar className="avatar" src={user.photo} />
          <p>
            {user.displayName ? user.displayName : user.email} wants to know
          </p>
          <div className="modal__scope">
            <PeopleAltOutlinedIcon />
            <p>Public</p>
            <ExpandMore />
          </div>
        </div>
        <div className="modal__field">
          <Input
            required
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="Ask where to start on your project with a specific 'How' or 'What' question."
          />
          <div className="modal__fieldLink">
            <LinkIcon />
            <input
              value={inputUrl}
              onChange={(e) => setInputUrl(e.target.value)}
              type="text"
              placeholder="Add a link to help others understand what you want to build."
            />
          </div>

          <div className="modal__buttons">
            <button
              onClick={() => setOpenModalTwo({ openModalTwo: false })}
              className="cancel"
            >
              Close
            </button>
            <button onClick={handleQuestion} type="submit" className="add">
              Add Question
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default QuestionBox;

Answer 1

Don't know how react-modal exactly works but as you are setting setOpenModalTwo(true) on click on parent container of Modal, when you're trying to close the Modal (by a click I guess), you are also firing the onClick event of your parent div, and so re-open the Modal.

So either move your Modal outside of your div, or use event.preventDefault() on Modal requesting close