title: ReactJS Pass key with an onClick function
body: <p>I have an image gallery where I loop trough image objects and I want to pass the <code>i</code> to my onClick function. This is my image gallery code:</p>
  
  <pre><code>&lt;div className="gallery clearfix"&gt;
    { block.gallery.map((item, i) =&gt; (
      i &lt; 1 ?
       &lt;div className="gallery-image" key={i} onClick={this.toggle}&gt;
         &lt;a href='' className="inner"&gt;
            &lt;img src={item.images.thumbnail_sm} alt={block.title} srcSet={`${item.images.thumbnail_md} 1x, ${item.images.thumbnail_lg} 2x`} className="img-fluid image"/&gt;
         &lt;/a&gt;          
       &lt;/div&gt;
       : null
       ))}
       &lt;div className="gallery-thumbs"&gt;
         &lt;div className="row"&gt;
          { block.gallery.map((item, i) =&gt; (
            i &gt; 0 &amp;&amp; i &lt; (limit + 1) ?
            &lt;div className="gallery-item" key={i} onClick={this.toggle}&gt;
            &lt;a href='' className="inner"&gt;
              &lt;img src={item.images.thumbnail_sm} alt={block.title} srcSet={`${item.images.thumbnail_md} 1x, ${item.images.thumbnail_lg} 2x`} className="img-fluid image" title="" /&gt;
                { block.gallery.length &gt; (limit + 1) &amp;&amp; i == limit ?
                  &lt;div className="img-overlay"&gt;
                     &lt;span className="img-indicator"&gt;{ block.gallery.length - (limit + 1) }+ &lt;span className="hidden-xs"&gt;Foto's&lt;/span&gt;&lt;/span&gt;
                  &lt;/div&gt;
               : null 
              }
            &lt;/a&gt;
          &lt;/div&gt;
          : null
          ))}
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my reactstrap modal where I want to show the image which is clicked:</p>
  
  <pre><code>&lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
        &lt;ModalBody&gt;            
          &lt;img src={block.gallery[this.state.clickedImage].item.images.thumbnail_lg}/&gt;
        &lt;/ModalBody&gt;
      &lt;/Modal&gt;
  </code></pre>
  
  <p>And here is the toggle function where I want to pass the clickedImage id:</p>
  
  <pre><code>toggle(id) {
      this.setState({
        clickedImage: id,
        modal: !this.state.modal
      });
    }
  </code></pre>