title: Is bind(this) necessary in Thinking in React tutorial example?
body: <p>Within React's <a href="https://facebook.github.io/react/docs/thinking-in-react.html" rel="nofollow">Thinking in React</a> tutorial, in the creation of a ProductTable component, the table is initially created statically in part like this:</p>
  
  <pre><code>var ProductTable = React.createClass({
    render: function() {
      var rows = [];
      var lastCategory = null;
      this.props.products.forEach(function(product) {
        if (product.category !== lastCategory) {
          rows.push(&lt;ProductCategoryRow category={product.category} key={product.category} /&gt;);
    }
        rows.push(&lt;ProductRow product={product} key={product.name} /&gt;);
        lastCategory = product.category;
      });
     // return table
  </code></pre>
  
  <p>However, later in the example, the table is created as such:</p>
  
  <pre><code>var ProductTable = React.createClass({
    render: function() {
      var rows = [];
      var lastCategory = null;
      this.props.products.forEach(function(product) {
        if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked &amp;&amp; this.props.inStockOnly)) {
          return;
        }
        if (product.category !== lastCategory) {
          rows.push(&lt;ProductCategoryRow category={product.category} key={product.category} /&gt;);
        }
        rows.push(&lt;ProductRow product={product} key={product.name} /&gt;);
        lastCategory = product.category;
      }.bind(this));  // &lt;-- this is the question
     // return table
  </code></pre>
  
  <p>Why is binding necessary here? The context doesn't seem to have changed, so why would the context need to be bound?</p>