使用 React 和 boostrap 的行信息单击打开模式

Question

i just want to open a modal with bootstrap and react. I want to put the row infos into the modal, the modals are in the html but when I click on a row, it trigger just the first modal in the list. I tried to put specific IDs on the modal but it does not work... Someone could help me on this?

const ProductsList = ({ products }) => {
  return (
    <div className="col-10 offset-2 p-0">
      <nav className="navbar navbar-light bg-light">
        <ul className="navbar-nav ml-auto">
          <li style={{ zIndex: "1" }} className="nav-item active">
            <Link style={{ cursor: "pointer" }} href="/products/add-product">
              <a className="nav-link">
                <i className="fas fa-plus-square"></i> Ajouter un produit
              </a>
            </Link>
          </li>
        </ul>
      </nav>
      <div className="table-responsive-lg">
        <div className="row text-white bg-dark px-4">
          <div className="col-3">ID</div>
          <div className="col-2">Nom du produit</div>
          <div className="col-2">Prix/unité</div>
          <div className="col-2">Stock</div>
          <div className="col-3">Catégorie</div>
        </div>
        {products &&
          products.products.map((product) => {
            return (
              <div
                key={product._id}
                className="row border px-4"
                data-toggle="modal"
                data-target="#exampleModal"
              >
                <div className="col-3 border-right">{product._id}</div>
                <div className="col-2 border-right">
                  {product.productName.charAt(0).toUpperCase() +
                    product.productName.slice(1)}
                </div>
                <div className="col-2 border-right">{product.price} €</div>
                <div className="col-2 border-right">{product.stock}</div>
                <div className="col-3">{product.categorie.categoryName}</div>
                <div
                  className="modal fade"
                  id="exampleModal"
                  tabIndex="-1"
                  aria-hidden="true"
                  role="dialog"
                >
                  <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                      <div className="modal-header">
                        <h5 className="modal-title">
                          {product.productName}
                        </h5>
                        <button
                          type="button"
                          className="close"
                          data-dismiss="modal"
                          aria-label="Close"
                        >
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div className="modal-body">...</div>
                      <div className="modal-footer">
                        <button
                          type="button"
                          className="btn btn-secondary"
                          data-dismiss="modal"
                        >
                          Close
                        </button>
                        <button type="button" className="btn btn-primary">
                          Save changes
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        
      </div>
    </div>
  );
};

export default ProductsList;

I tried with table before but it's the same result.

Answer 1

As you mentioned, your id attribute is a constant ( exampleModal ) and does not vary by row. Note that the data-target attribute must also change on your row (the click target).

Additionally, as Bootstrap modals require JavaScript to toggle visibility outside of React you may get odd results:

React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. Source

Consider using a React-Bootstrap library (like reactstrap ) to manage this toggling within React.