자바스크립트를 이용한 커스텀 모달

import React from "react";

function Modal(props) {
  const divStyle = {
    display: props.displayModal ? "block" : "none",
  };
  function closeModal(e) {
    e.stopPropagation();
    props.closeModal();
  }

  return (
    <div className="modal" onClick={closeModal} style={divStyle}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <span className="close" onClick={closeModal}>
          &times;
        </span>

        {props.children}
      </div>
    </div>
  );
}

export default Modal;

import React, { useState } from "react";
import "./App.css";
import Modal from "./Modal";

function App() {
  const [modal, setModal] = useState(false);
  const [modal1, setModal1] = useState(false);
  const selectModal = (info = "") => {
    setModal((perv) => !perv);
  };


  return (
    <div className="App">
      <p onClick={() => selectModal("Modal A")}>Open Modal A</p>
      <Modal displayModal={modal} closeModal={selectModal}>
        <div>modal1</div>
        <div onClick={() => setModal1("modal a1")}>Open second modal</div>
        <Modal displayModal={modal1} closeModal={setModal1}>
          <div>modal2</div>

          <div>Second modal</div>
        </Modal>
      </Modal>
    </div>
  );
}

export default App;