title: Modal not showing proper video in react
body: <p>Hi I'm implementing a sample app with react,I'm also using youtube api search and react bootstrap.</p>
  
  <p>The idea is the following, I enter a search term, for example "PS4" this will call <strong>youtube api search</strong> and will bring back 5 matching results in a json format.
  With this json, I render a list of thumbnails with videos, title, description,(similar to youtube website). if I click on one of the thumbnails, the idea is to display a modal dialog with the video inside. Here's the problem, <em>it's always loading the same video.</em></p>
  
  <p><em>I omit the imports at the beginning of the file</em></p>
  
  <p><strong>VideoList.js</strong></p>
  
  <pre><code>   class VideoList extends React.Component {
      constructor(props) {
          super(props);
          this.openModal = this.openModal.bind(this);
          this.close = this.close.bind(this);
          this.state = {
              showModal: false
          }
      }
  
      openModal(video) {
          this.setState({ showModal: true });
      }
      close() {
          this.setState({ showModal: false });
      }
  
      render() {
          const videoItems = this.props.videos.map(video =&gt;
              &lt;Col xs={6} md={4}&gt;
                  &lt;Thumbnail onClick={() =&gt; this.openModal(video)}
                      className="thumbnail"
                      src={video.snippet.thumbnails.default.url}
                      alt={video.snippet.description}
                      key={uid()}
                  &gt;
                      &lt;h3&gt;{video.title}&lt;/h3&gt;
                      &lt;p&gt;{video.snippet.description}&lt;/p&gt;
                      &lt;hr /&gt;
                      &lt;i&gt;Date: {video.snippet.publishedAt}&lt;/i&gt;
                      &lt;VideoView show={this.state.showModal} video={video} close={this.close} /&gt;
                  &lt;/Thumbnail&gt;
              &lt;/Col&gt;
          );
          return (
              &lt;Grid&gt;
                  &lt;Row&gt;
                      {videoItems}
                  &lt;/Row&gt;
              &lt;/Grid&gt;
          );
      }
  }
  
  export default VideoList;
  </code></pre>
  
  <p><strong>VideoView.js</strong></p>
  
  <pre><code>   const VideoView = props =&gt; {
      if (!props) {
          return &lt;div&gt;{'Could not load the video'}&lt;/div&gt;
      }
      return (
          &lt;div className="static-modal"&gt;
              &lt;Modal show={props.show}&gt;
                  &lt;Modal.Header&gt;
                      &lt;Modal.Title&gt;{props.video.snippet.title}&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
  
                  &lt;Modal.Body&gt;
                      One fine body...
                  &lt;/Modal.Body&gt;
                  &lt;Modal.Footer&gt;
                      &lt;Button onClick={() =&gt; props.close()}&gt;Close&lt;/Button&gt;
                  &lt;/Modal.Footer&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      );
  }
  
  export default VideoView;
  </code></pre>
  
  <p>If I click on one of the thumbnails, a modal popup shows with the video (some information of it, not the video itself), the thing is that it always shows the last video (<em>the last in the list of thumbnails</em>)</p>
  
  <p><strong>Another thing:</strong> I'm facing a design problem here because I think I should delegate the <strong>onclose</strong> action to the modal dialog, in this case, the <strong>VideoView</strong> however  the videoView component is a stateless component, I'm only sending some props to render it, (check the onclose callback). Is this a correct approach? Thanks!</p>