React Modal returns last value of mapped data

Question

Struggling with this issue with the earlier answers not utilizing map function / functional components. When I click my Card, the modal only shows the data of the last Modal:

export const ModalCard = (props) => {

    const productData = props.data;

    const [modal, setModal] = React.useState(false);
    const toggle = () => setModal(!modal);

    return (
        <Row>
            {productData.map((v, i) => (
                <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}>
                    <div className="pb-4" onClick={toggle}>
                            <div className="product_card_padding">
                                <div className="pt-4">
                                    <span className="card_product_subtitle">{v.headline}</span>
                                </div>
                            </div>

                        <Modal isOpen={modal}
                            toggle={toggle}
                            centered
                        >
                            <ModalBody className="product_modal" onClick={toggle}>
                                <div className="row pt-3 bg_white">
                                    <Col>
                                        <div>
                                            <span className="card_product_subtitle">{v.headline}</span>
                                        </div>
                                    </Col>
                                </div>
                            </ModalBody>
                        </Modal>
                    </div>
                </Col>
            ))}
        </Row>

    );
}

Answer 1

According to your code, multiple modals will be opened and you will see the last modal.

If you have 10 products, then 10 modals will be opened.

My suggestion is that you need to define a global modal outside map function and you need to define a new state variable to represent the selected product to be rendered on the modal.

selectedInd holds the data index to be rendered on modal.

const [selectedInd, setSelectedInd] = React.useState(-1);

Then toggle function would be changed to set -1 to hide modal.

const toggle = () => setSelectedInd(-1);

And move the modal outside map.

Try to use the following code pattern.

export const ModalCard = (props) => {
  const productData = props.data;

  const [selectedInd, setSelectedInd] = React.useState(-1);
  const toggle = () => setSelectedInd(-1);
  const modal = selectedInd >= 0 && (productData && productData.length > selectedInd);

  return (
    <React.Fragment>
      <Row>
          {productData.map((v, i) => (
              <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}>
                  <div className="pb-4" onClick={()=>setSelectedInd(i)}>
                      <div className="product_card_padding">
                          <div className="pt-4">
                              <span className="card_product_subtitle">{v.headline}</span>
                          </div>
                      </div>
                  </div>
              </Col>
          ))}
      </Row>
      {modal && <Modal isOpen={modal} toggle={toggle} centered>
          <ModalBody className="product_modal" onClick={toggle}>
              <div className="row pt-3 bg_white">
                  <Col>
                      <div>
                          <span className="card_product_subtitle">{productData[selectedInd].headline}</span>
                      </div>
                  </Col>
              </div>
          </ModalBody>
      </Modal>}
    </React.Fragment>
  );
}