JAVASCRIPT

react users list modal

import React, { useState } from "react";

//ProductsData
import { ProductData } from "../products/data";

const Products = () => {
  const [showModal, setshowModal] = useState(false);
  const [hasClass, changeClass] = useState({
    activeObject: null,
    objects: ProductData.map((product) => {
      return product.id;
    }),
  });

  function toggleActive(index) {
    setshowModal(true);
    changeClass({ ...hasClass, activeObject: hasClass.objects[index] });
  }

  function toggleActiveClass(index) {
    if (hasClass.objects[index] === hasClass.activeObject) {
      return "active";
    } else {
      return "inactive";
    }
  }

  const Details = (ProductData) => (
    <div id="productModal" className={toggleActiveClass()}>
      <div className="product-img-holder">
        <img src={product.image} alt="img" />
      </div>
      <div className="product-details">
        <span className="list-title">
          {product.name}
          <br /> <span>{product.subtitle}</span>
        </span>
        <span className="list-grams">{product.grams}</span>
        <span className="list-price">{product.price}</span>
        <span className="list-desc">{product.desc}</span>
        <span className="list-cart">{product.cart}</span>
      </div>
    </div>
  );

  return (
    <>
      <ul className="list-menu">
        {ProductData.map((product, index) => (
          <li
            key={index}
            onClick={() => toggleActive(index)}
            className={toggleActiveClass(index)}
          >
            <span className="list-title">
              {product.name} <br /> <span>{product.subtitle}</span>
            </span>
            <span className="list-grams">{product.grams}</span>
            <span className="list-price">{product.price}</span>
          </li>
        ))}
      </ul>
      {showModal ? <Details /> : null}
    </>
  );
};

export default Products;
 Run code snippet