title: Cannot figure out the problem with key and props
body: <p>I need help with figuring out why when I use a function component, I do not get a warning of this type: </p>
  
  <blockquote>
    <p>index.js:1446 Warning: Each child in an array or iterator should have a unique "key" prop.</p>
  </blockquote>
  
  <p>When I use a class component, this warning pops out.</p>
  
  <p>Thank you in advance for clarification.</p>
  
  <p>function component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import VideoItem from './VideoItem';
  
  const VideoList = ({videos, selectedVideo}) =&gt;{
      const renderedItems = videos.map((video) =&gt;{
          return &lt;VideoItem key={video.id.videoId} video={video} selectedVideo={selectedVideo}/&gt;
      })
      return &lt;div&gt;{renderedItems}&lt;/div&gt;
  }
  
  export default VideoList;</code></pre>
  </div>
  </div>
  </p>
  
  <p>class Component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import VideoItem from './VideoItem';
  
  class VideoList extends Component {
      render() { 
          const renderedItems = this.props.videos.map((video) =&gt; {
              return &lt;div&gt;&lt;VideoItem key={video.id.videoId} video={video} selectedVideo={this.props.selectedVideo}/&gt;&lt;/div&gt;
          })
          return(
              &lt;div&gt;{renderedItems}&lt;/div&gt;
          )
      }
  }
   
  export default VideoList;</code></pre>
  </div>
  </div>
  </p>