title: React JS thumbnail gallery
body: <p>I am building a component which is a gallery that consists of a main gallery image and a list of thumbnails under the main image. This component will be used across multiple pages so each page will have it own thumbnails/images.  I have worked out how to get the correct images into the gallery depending on the page using redux and a store. However I cant figure out the functionality in getting the main image to change when the corresponding thumbnail is clicked, any ideas or suggestion how I could approach this?</p>
  
  <pre><code>   import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  class Gallery extends Component {
  
      render() {
  
          let img = this.props.bouq.map((el, index) =&gt; {
              return(
                  &lt;img src={"/images/" + el + ".jpg"} alt="." key={index}/&gt;
              );     
          })
  
          return(
              &lt;section className="gallery"&gt;
  
                      &lt;div className="mainImage"&gt;
                          &lt;img src='/images/bouquets.jpg' alt="."/&gt;
                      &lt;/div&gt;
  
                      &lt;div className="thumbnails"&gt;
                          {img}   
                      &lt;/div&gt;
  
  
              &lt;/section&gt;
  
          );
  
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          bouq: state.bouquets
      };
  }
  
  export default connect(mapStateToProps)(Gallery); 
  </code></pre>