How do I display a component on React Modal

Question

I'm trying to make a Modal to pop-up when click on an individual card, with his specific data and props, but I don't really know how to do that.

I'm doing all of this with Next.js for the first time, so if you see any other error please tell me. I really want to learn more and improve.

This is my /accidents route - accidents.js

export default function Home() {
    const router = useRouter()
    const [isOpen, setIsOpen] = useState(false)
    const [cardsArray, setCards] = useState([])

    const addCard = () => {
        let force = generateForce(100)
        let passagers = generatePassagers()
        let speed = generateSpeed()
        let msg = helpNeeded(force, passagers)

        let newCard = (
            <AccidentCard
                force={force}
                passagers={passagers}
                speed={speed}
                msg={msg}
            />
        )
        console.log(newCard)
        setCards((arr) => [...arr, newCard])
    }

    let cardsList = cardsArray.map((card, idx) => (
        <div key={idx} id={idx}>
            <Link
                href={`/accidents/?accidentNum=${idx}`}
                as={`/accidents/acc.num.${idx + 1}`}
            >
                <a>{card}</a>
            </Link>
        </div>
    ))  

    function toggleModal() {
        setIsOpen(!isOpen)
    }

    return (
        <div>
            <button onClick={addCard}>Add more</button>
            <div className={styles.cardsList} onClick={toggleModal}>{cardsList}</div>
            <Link href="/">
                <a>Go back to Home!</a>
            </Link>
            <ReactModal isOpen={isOpen} onRequestClose={toggleModal}>
                <div>Is MODAL OPEN IT WORKS</div>
                <button onClick={toggleModal}>X</button>
            </ReactModal>
        </div>
    )
}

And this is the Card component - AccidentCard.js

const AccidentCard = (props) => {

    return (
        <div className={styles.cardContainer}>
            <p>Possible casualties: {props.passagers}</p>
            <p>Force is: {props.force} Joules</p>
            <p>Speed at impact: {props.speed} km/h</p>
            <p className={styles.help}>{props.msg}</p>
        </div>
    )
}

And also have this file to open an individual page for each accident. [accidentNum].js

export default function AccidentPage() {
  const router = useRouter()
  const {accidentNum} = router.query
 

  return <div>I'm the ACCIDENT {accidentNum}</div>
}

Answer 1

I use an inline style for CSS, you can change it. Codesandbox link

import { useState } from "react";

export default function IndexPage() {
  const [modalActive, setModalActive] = useState(false);
  return (
    <div>
      <button onClick={() => setModalActive(true)}>Open Card </button>

      {modalActive && (
        <ReactModal close={() => setModalActive(false)}>
          <div
            style={{
              width: 100,
              height: 100,
              backgroundColor: "white",
              padding: 20
            }}
          >
            Your Card Component is Here
          </div>
        </ReactModal>
      )}
    </div>
  );
}

function ReactModal({ children, close }) {
  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        background: "rgba(0, 0, 0, 0.5)",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <div
        style={{
          width: "100vw",
          height: "100vh",
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        {children}
        <button
          onClick={close}
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            marginRight: 10,
            marginTop: 10
          }}
        >
          Close Modal(Maybe put some close icon)
        </button>
      </div>
    </div>
  );
}

I hope it helps. Have a great day