title: ReactJS, can't pass props to modal window
body: <p>I'm trying to render a modal window when a user clicks on a product to find out more details. I created a modal component that is hidden by default, and clicking on the product triggers a function that makes the modal visible and gives it the props of name, price of the product etc.
  However, I only get an empty modal.</p>
  <p>Container:</p>
  <pre><code>const Product = ({ imgUrl, nameUrl, priceUrl, id }) =&gt; {
    const [title, setTitle] = useState(&quot;&quot;);
    const [productId, setProductId] = useState(&quot;&quot;);
    const [price, setPrice] = useState(&quot;&quot;);
    const [img, setImg] = useState(&quot;&quot;);
    const [modalClassName, setModalClassName] = useState(&quot;hidden&quot;);
  
    const renderModalProduct = () =&gt; {
      setTitle(nameUrl);
      setPrice(priceUrl);
      setImg(imgUrl);
      setModalClassName(&quot;visible&quot;);
    };
  
    return (
      &lt;div className=&quot;product&quot;&gt;
        &lt;div className=&quot;img-container&quot;&gt;
          &lt;img src={imgUrl} alt=&quot;product image&quot; onClick={renderModalProduct} /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;product-description&quot;&gt;
          &lt;p&gt;{nameUrl}&lt;/p&gt;
          &lt;p&gt;€ {priceUrl}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div className=&quot;button-container&quot;&gt;
          &lt;AddShoppingCartIcon className=&quot;btn&quot; data-tip=&quot;Add to cart&quot; /&gt;
          &lt;FavoriteBorderIcon className=&quot;btn&quot; data-tip=&quot;Add to Favorites&quot; /&gt;
          {/* &lt;ZoomInIcon className=&quot;btn&quot; /&gt; */}
        &lt;/div&gt;
        &lt;ReactTooltip type=&quot;light&quot; border=&quot;true&quot; borderColor=&quot;grey&quot; /&gt;
        &lt;ModalProduct
          imgUrl={imgUrl}
          nameUrl={nameUrl}
          priceUrl={priceUrl}
          id={id}
          modalClassName={modalClassName}
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Modal Component:</p>
  <pre><code>const ModalProduct = ({ title, productId, price, img, modalClassName }) =&gt; {
    return (
      &lt;div className={`${modalClassName} modal-product`}&gt;
        &lt;p&gt;{title}&lt;/p&gt;
        &lt;img src={img} alt=&quot;&quot; /&gt;
        &lt;p&gt;{price}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Any ideas? Thank you!</p>