title: (ReactJS) Non-interactive elements should not be assigned mouse or keyboard event listeners
body: <p>I am receiving this error and two warnings  :</p>
  
  <blockquote>
    <p>Non-interactive elements should not be assigned mouse or keyboard
    event listeners.</p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>video and onVideo select are missing in props validation</p>
  </blockquote>
  
  <pre><code>import React from 'react';
  
  const VideoListItem = ({ video, onVideoSelect }) =&gt; {
    const imageUrl = video.snippet.thumbnails.default.url;
  
    return (
      &lt;li onClick={() =&gt; onVideoSelect(video)} className="list-group-item"&gt;
        &lt;div className="video-list media"&gt;
          &lt;div className="media-left"&gt;
            &lt;img className="media-object" src={imageUrl} alt="Media" /&gt;
          &lt;/div&gt;
  
          &lt;div className="media-body"&gt;
            &lt;div className="media-heading"&gt;{video.snippet.title}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  };
  
  export default VideoListItem;
  </code></pre>
  
  <p>Will someone please assist me in the proper way of correcting these issues.</p>