How to enter data in modal windows?

Question

React

I first made the window itself modal, it can open and close and there was an overlay under it.

Now I have connected react-modal, and now the modal window can also do everything that I did before.

Now I want to make 6 modal windows, each one will have its own information in the opened popup.
I threw the information into the state (the code will be below).
The card itself and the modal are like one component that is rendered in another place where I will use it (a card with a modal on the page)

So, manually filling in all the data for each popup is expensive, but what if I have such cards not 6 but 106. How can I iterate over the state and enter all the information in these popups for each card separately?
How can you solve a similar problem with modals and info for them?

State with information for popups (it is located in the component where the modal card is):

const [cardText, setCardText] = useState([
        {
            title: 'Portfolio page (Demo here)',
            contains: '2 page landing',
            responsive: 'Adaptive design',
            things: 'Used JQuery'
        },
        {
            title: 'Digital Agency Page (Demo here)',
            contains: '1 page landing',
            responsive: 'Adaptive design',
            things: 'Used only JS scripts (without libs)'
        },
        {
            title: 'Nike simple page (Demo here)',
            contains: '1 page landing',
            responsive: 'Responsive design',
            things: 'Used parallax and choosing colors'
        },
        {
            title: 'Site for mobile App (Demo here)',
            contains: '5 pages',
            responsive: 'Adaptive design',
            things: 'Used different JS scripts and animations'
        },
        {
            title: 'Digital Agency Page (Demo here)',
            contains: '3 pages',
            responsive: 'Adaptive design',
            things: 'Has a pages with login and registration'
        },
        {
            title: 'Covid-19 FAQ Page (Demo here)',
            contains: '2 pages',
            responsive: 'Adaptive design',
            things: 'Used some JS scripts and create sticky navigation'
        },
    ]
            
    );

Card and modal components:

import React, { useState } from 'react';
import './PortfolioCard.css';
import Modal from 'react-modal';

const customStyles = {
    content : {
      Здесь стили для попапа, я их опущу, для экономии места
    }
  };
  Modal.setAppElement('#root')

export default function PortfolioCard() {
        var subtitle;
        const [modalIsOpen,setIsOpen] = useState(false);
        
        function openModal() {
          setIsOpen(true);
        }
      
        function afterOpenModal() {
          subtitle.style.color = '#f00';
        }
      
        function closeModal(){
          setIsOpen(false);
        }
      
          return (
            <div>
              <button className="card" onClick={openModal}>Open Modal</button>
              <Modal isOpen={modalIsOpen} onAfterOpen={afterOpenModal} onRequestClose={!closeModal}  style={customStyles} contentLabel="Example Modal" >

                <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
                <button onClick={closeModal}>close</button>
                <div>I am a modal</div>
                
              </Modal>

              
            </div>
          );
}

This is the page where I should have the cards themselves (there is already a menu and a logo):

import React from 'react';
import Navbar from '../../components/navbar/Navbar';
import NavbarBrand from '../../components/NavbarBrand/NavbarBrand'
import PortfolioCard from '../../components/portfolioCard/PortfolioCard';
import './PortfolioPage.css'

export default function PortfolioPage() {
   
    return (
        <div>
            <div className="portfolio-wrapper">
                <PortfolioCard  />
            </div>
            <NavbarBrand />
            <Navbar />
        </div>
    )
}

Answer 1

card and modal, it's like one component

suddenly I will have such cards not 6 but 106

Why do you need six windows? Not to mention a hundred and six. Make one that will display the data of any of the cards:

function Portfolio() {
  const [ modalData, setModalData ] = useState(null);
  const onClick = (e) => setModalData(cardsData[e.target.dataset.index]);
  const onClose = () => setModalData(null);

  return (
    <div>
      {cardsData.map((n, i) => (
        <button data-index={i} onClick={onClick}>
          open modal #{i + 1}
        </button>
      ))}
      <Modal isOpen={!!modalData} onRequestClose={onClose}>
        {modalData && (
          <>
            <h2>{modalData.title}</h2>
            <button onClick={onClose}>close</button>
            <div>{modalData.things}</div>
          </>
        )}
      </Modal>
    </div>
  );
}