Как внести данные в модальные окна?

Question

[Vlad Yanukovich]

Я сначала сделал сам окно модальное, оно умеет открываться и закрываться и был оверлей под ним.

Сейчас же я подключил react-modal, ну и теперь модальное окно так же умеет делать все тоже самое что я и сделал до этого.

Теперь хочу сделать 6 модальных окон, у каждого в раскрывшемся popup`е будет своя информация.
Информацию я закинул в стейт (код будет ниже).
Сама карточка и модалка, это как один компонент, который рендерится в другом месте, где я его буду использовать (карточка с модалкой на странице)

Так вот, вручную заполнять все данные для каждого попап`а это затратно, а вдруг у меня будет таких карточек не 6 а 106. Как мне сделать перебор стейта и занести всю информацию в эти попапы для каждой карточки отдельно?
Как можно решить подобную задачу с модалками и инфой для них?

Стейт с информацией для попапов(он находится в компоненте где карточка модалка):

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'
        },
    ]
            
    );

Компонент карточки и модалки:

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>
          );
}

Это страница, где у меня должны лежать сами карточки (тут уже есть менюшка и лого):

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

[0xD34F]

карточка и модалка, это как один компонент

вдруг у меня будет таких карточек не 6 а 106

А зачем вам шесть окон? Не говоря уже о ста шести. Сделайте одно, которое будет отображать данные любой из карточек:

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>
  );
}

Comments

[Vlad Yanukovich]

благодарю, это сработало, буду сейчас изучать детально код Ваш

При этом это именно то, что я и хотел донести в вопросе. Еще раз спасибо