How to make modal windows for product cards?

Question

JavaScript

There is a product catalog. Each item has a "Read More" button. How to display a modal window with information about this particular product on button click?
It’s clear how to display a modal window right in the card, then it’s easy to transfer product information, but it’s not clear how to open a modal window in the center of the screen, and also transfer product information, it’s not clear how to organize it all ...
And in general, how modal windows are made in React ?
Catalog structure:
--- Catalog (grid of products)
--- --- Card (separately one product)
PS. Installed react-modal. In the catalog in a cycle, I displayed an array of modals. But it doesn't work as it should... In any case, a window opens with information about the last product.
How to make each window have information about the product on which this window was called?

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

class PizzaCatalog extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentDidMount() {
    this.props.fetchAll();
  }

  openModal() {
    this.setState({
      modalIsOpen: true
    });
  }

  afterOpenModal() {
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({
      modalIsOpen: false
    });
  }

  render() {
    return (
      <div>
        <Carousel />
        <h1>Каталог товаров</h1>
        <hr/>
        <div className="wrapper">
            {
              this.props.catalog.map(product => (
                <Card
                  className="col"
                  key={product.name}
                  addedToCart={this.props.checkIsProductAddedToCart(product.uid)}
                  product={product}
                  handleClick = { this.openModal }
                />
              ))
            }
            {
              this.props.catalog.map(product => (
                <Modal
                  isOpen={this.state.modalIsOpen}
                  onAfterOpen={this.afterOpenModal}
                  onRequestClose={this.closeModal}
                  style={customStyles}
                  contentLabel="Example Modal"
                >

                  <h2 ref={subtitle => this.subtitle = subtitle}>{ product.name }</h2>
                  <button onClick={this.closeModal}>close</button>
                  <div>I am a modal</div>
                  <form>
                    <input />
                  </form>

                </Modal>
              ))
            }
          </div>
      </div>
    );
  }
}

Answer 1

React-modal is a good library, nothing more, I would recommend leaving it.
How to make a modal:
at the level where you draw a directory, or even higher - you draw a modal window and pass it the sign by which it is opened, for example: isProductModalOpen (true / false). This code is in a "container" attached to redux.
Further, when you click on the button for more details, you throw an action OPEN_PRODUCT_MODAL+ product ID (which you will request from the server) or + in this info about the product , if you already have it and you don’t need to request anything.
The modal reducer takes this action and processes it. Specifically sets the value you rely on in the container and makes the flag trueisProductModalOpen
When the modal closes, the action that is processed in the reducer also flies away and the isProductModalOpen flag is set to false.
Ready!
This approach allows you to create several modal windows of different types.