title: React onClick JSX returned from function
body: <p>I'm using the array map method below to iterate over an array of image URLs, and return some JSX with the img src.</p>
  
  <p>Ideally, I'd like to bind click to each image so that I can get this (clicked) img src into Redux later.</p>
  
  <p>The below, gives me an error:</p>
  
  <blockquote>
    <p>Cannot read property 'changeImg' of undefined</p>
  </blockquote>
  
  <pre><code>&lt;div className="gallery-thumbs"&gt;
          { galleryImages.map(function(img, index){
          return &lt;img
                  key={ img } 
                  className="thumb-product-img" src={ img }
                  onClick={ this.changeImg.bind(this) } /&gt;;
        }) }
      &lt;/div&gt;    
  </code></pre>
  
  <p>However, when I move the <code>onClick</code> up a level it doesn't give me the error... the only problem is, the context of this is lost.</p>
  
  <pre><code>&lt;div className="gallery-thumbs" onClick={ this.changeImg.bind(this) }&gt;
          { galleryImages.map(function(img, index){
          return &lt;img
                  key={ img }
                  className="thumb-product-img" src={ img } /&gt;;
        }) }
      &lt;/div&gt;
  </code></pre>
  
  <p>tl:dr; how can I bind click to JSX returned outside of my render method?</p>