title: How to pass an onClick event handler a function that takes a parameter and still bind the function to the component's "this" context?
body: <p>I have a class based React component called "AllProducts.jsx" that I defined like this "class AllProducts extends Component" so when I pass functions to onClick event handlers, I need to bind the context of "this", but when I try to pass one of these functions a parameter, I get an error in the console that says "cannot read property bind of undefined."</p>
  
  <p>This is what the code looks like when it throws an error, please look at the i tag's onClick handler:</p>
  
  <pre><code>renderProductInfo() {
  
      return this.props.allProducts.map((product) =&gt; {
          return [
              &lt;li id="shownName"&gt;{product.name}&lt;/li&gt;,
              &lt;li id="shownSKU"&gt;{product._id}&lt;/li&gt;,
              &lt;li id="shownCategory"&gt;{product.category}&lt;/li&gt;,
              &lt;li id="shownPrice"&gt;${product.price}&lt;/li&gt;,
              &lt;li id="shownQuantity"&gt;{product.quantity}&lt;/li&gt;,
              &lt;i onClick={this.handleEditProduct(product._id).bind(this)} 
                 id="shownEdit" className="fi-pencil"&gt;&lt;/i&gt;,
              &lt;br /&gt;
          ];
      });
  
  }
  </code></pre>
  
  <p>I worked around this issue by defining the function right inside the onClick handler like this:</p>
  
  <pre><code>&lt;i onClick={() =&gt; {
                      this.props.fetchSingleProduct(product._id).then(() =&gt; {
                          var opposite = !this.state.editProduct;
  
                          this.setState({
                              editProduct: opposite
                          });
                      });
                  }} 
                     id="shownEdit" className="fi-pencil"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Is there a way for me to just directly pass in the parameter and avoid the error?</p>