title: React modal on array list
body: <p>need some help with this :D</p>
  <p>I am trying to pull my array as list. On each list click (each list contains data from array) to open correct modal that will contain the rest of the info's from the array data file. Also I am not able to pull the array through my const Details so it can show me data I need, not sure how. I my other file i call out the component only.</p>
  
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  
  //ProductsData
  import { ProductData } from "../products/data";
  
  const Products = () =&gt; {
    const [showModal, setshowModal] = useState(false);
    const [hasClass, changeClass] = useState({
      activeObject: null,
      objects: ProductData.map((product) =&gt; {
        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) =&gt; (
      &lt;div id="productModal" className={toggleActiveClass()}&gt;
        &lt;div className="product-img-holder"&gt;
          &lt;img src={product.image} alt="img" /&gt;
        &lt;/div&gt;
        &lt;div className="product-details"&gt;
          &lt;span className="list-title"&gt;
            {product.name}
            &lt;br /&gt; &lt;span&gt;{product.subtitle}&lt;/span&gt;
          &lt;/span&gt;
          &lt;span className="list-grams"&gt;{product.grams}&lt;/span&gt;
          &lt;span className="list-price"&gt;{product.price}&lt;/span&gt;
          &lt;span className="list-desc"&gt;{product.desc}&lt;/span&gt;
          &lt;span className="list-cart"&gt;{product.cart}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  
    return (
      &lt;&gt;
        &lt;ul className="list-menu"&gt;
          {ProductData.map((product, index) =&gt; (
            &lt;li
              key={index}
              onClick={() =&gt; toggleActive(index)}
              className={toggleActiveClass(index)}
            &gt;
              &lt;span className="list-title"&gt;
                {product.name} &lt;br /&gt; &lt;span&gt;{product.subtitle}&lt;/span&gt;
              &lt;/span&gt;
              &lt;span className="list-grams"&gt;{product.grams}&lt;/span&gt;
              &lt;span className="list-price"&gt;{product.price}&lt;/span&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        {showModal ? &lt;Details /&gt; : null}
      &lt;/&gt;
    );
  };
  
  export default Products;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you for you help.</p>