我需要将一个modal/lightbox组件动态地呈现到一个列表数组组件中，但是它只呈现了最后一个modal内容。
我如何将这个模态组件动态化，以便从主组件调用它，并使用对象数组中的正确数据填充它？
我的列表组件为：

import React, { Component } from 'react';
import LightBox from './LightBox';

class ListPrice extends Component {

  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

   render() {
     return (
       <div>
        {this.props.products.map(product => {
         return(
          <div>
          <a key={product.id} onClick={this.toggleModal}>
              <h3>{product.title}</h3>
              <p>{product.description}</p>
           </a>
          <LightBox key={product.id} show={this.state.isOpen}
                    onClose={this.toggleModal}>
                    {product.modalContent}
          </LightBox>
        </div>
      );
    })}
   </div>
  );
 }
}
export default ListPrice;

我的LightBox组件是（我删除了样式以显示短代码）：

import React from 'react';
import PropTypes from 'prop-types';

class LightBox extends React.Component {
  render() {
    if(!this.props.show) {
      return null;
    }
    return (
      <div>
        <div>
          {this.props.children}
          <div>
            <button onClick={this.props.onClose}>
              Close
            </button>
          </div>
        </div>
      </div>
    );
  }
}

LightBox.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool,
  children: PropTypes.node
};

export default LightBox;

感谢您的评分