title: What's the difference between these two arrow functions?
body: <p>I am building a website. Every time I click to a &quot;product&quot; I want it to be saved in a react hook. Why does my program collapse when I use function2?</p>
  <pre><code>const function1 = prod =&gt; () =&gt; {...} 
  </code></pre>
  <p>vs</p>
  <pre><code>const function2 = (prod) =&gt; {...}
  </code></pre>
  <pre><code>const handlePurchase = prod =&gt; () =&gt; {
          setSelectedProduct(prod)
          history.push(`/product/?name=${prod.name}&amp;id=${prod.id}`)
      }
  
  
      return (
          &lt;&gt;
              &lt;h2 className=&quot;text-Header 1&quot;&gt;Keep it Real Keep it Loco&lt;/h2&gt;
  
              &lt;ProductsContainer&gt;
                  {productsdb.map(prod =&gt; (
                      &lt;div className=&quot;product&quot; key={prod.id} onClick={handlePurchase(prod)}&gt;
                          &lt;img className=&quot;product-image&quot; src={prod.img} alt={prod.name} /&gt;
                          &lt;h2 className=&quot;product-name&quot;&gt;{prod.name}&lt;/h2&gt;
                          &lt;h3 className=&quot;product-price&quot;&gt;{'$' + prod.price}&lt;/h3&gt;
                      &lt;/div&gt;
  
                  ))}
              &lt;/ProductsContainer&gt;
          &lt;/&gt;
      )
  }
  </code></pre>