Получить модальное окно от зацикливания карт - React

Question

Я пытаюсь открыть модальное диалоговое окно из набора карточек, которые зацикливались на данных, которые получает компонент.Я не могу понять, как заставить модал получать соответствующие данные с карты, на которую нажали.В приведенном ниже коде я попытался поместить модальное значение вне цикла, но затем я не могу понять, как передать идентификатор кликаемой карты в новую функцию, которая будет управлять модальным

.Компонент, который управляет циклом карточек и содержит модальные

import React, {Component} from 'react';
import {Nav, NavItem, NavLink, Card, CardImg, CardText,
  CardBody, CardTitle, CardSubtitle, FormGroup, Input, Col, Button, Modal, ModalHeader, ModalBody} from 'reactstrap';
import classnames from 'classnames';


class ProductCard extends Component {
  constructor(props){
    super(props);
    this.state={
      productList: this.props.products,
      isModalOpen: false
    }
    this.toggleModal = this.toggleModal.bind(this)
  }

  toggleModal() {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    });
  }

  render(){
    return(
      this.state.productList.map(prod => (
        <div key={prod.prod_id} className="col-12 col-md-3 mb-4 rowCard" onClick={this.toggleModal}>
            <Card>
              <CardImg top width="100%" src={prod.prod_image}  alt={prod.prod_name_eng}/>
              <CardBody>
                <CardTitle>{prod.prod_name_eng}</CardTitle>
                <CardSubtitle>{prod.prod_cost_total}</CardSubtitle>
                <CardText>{prod.prod_description}</CardText>
              </CardBody>
            </Card>
            <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
              <ModalHeader toggle={this.toggleModal}>{prod.prod_name_eng}</ModalHeader>
              <ModalBody>{prod.prod_description}</ModalBody>
            </Modal>
        </div>
      )) 
    );
  }
}

Любая помощь приветствуется!спасибо

Answer 1

Я бы посоветовал переместить Модал за пределы вашей карты, так как это усложняет ситуацию.Если вы сделаете это, то ваш toggleModal метод будет ответственен за принятие индекса (предоставленного функцией map), а затем вам просто нужно будет получить правильный текст для модальных элементов.

  toggleModal(index) {
    this.setState({
      cardIndex: index,
      isModalOpen: !this.state.isModalOpen
    });
  }

Тогда вы модальны, просто нужно сослаться на список продуктов в состоянии, получить доступ к индексу и получить заголовок и описание:

class ProductCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productList: this.props.products,
      cardIndex: null,
      isModalOpen: false
    };
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal(id) {
    console.log(id);
    this.setState({
      cardIndex: id,
      isModalOpen: !this.state.isModalOpen
    });
  }

  render() {
    const { productList, cardIndex } = this.state;
    console.log("CardIndex: ", cardIndex);
    console.log("Product: ", productList[cardIndex]);
    return (
      <Fragment>
        {productList.map((prod, index) => {
          return (
            <div
              key={prod.prod_id}
              className="col-12 col-md-3 mb-4 rowCard"
              onClick={e => this.toggleModal(index)}
            >
              <Card>
                <CardImg top src={prod.prod_image} alt={prod.prod_name_eng} />
                <CardBody>
                  <CardTitle>{prod.prod_name_eng}</CardTitle>
                  <CardSubtitle>{prod.prod_cost_total}</CardSubtitle>
                  <CardText>{prod.prod_description}</CardText>
                </CardBody>
              </Card>
            </div>
          );
        })}
        <Modal
          isOpen={this.state.isModalOpen}
          toggle={e => this.toggleModal(cardIndex)}
        >
          <ModalHeader toggle={e => this.toggleModal(cardIndex)}>
            {cardIndex !== null && productList[cardIndex].prod_name_eng}
          </ModalHeader>
          <ModalBody>
            {cardIndex !== null && productList[cardIndex].prod_description}
          </ModalBody>
        </Modal>
      </Fragment>
    );
  }
}

Вот ссылка codesandbox на рабочую версию: