(ReactJS) Non-interactive elements should not be assigned mouse or keyboard event listeners

Question

I am receiving this error and two warnings :

Non-interactive elements should not be assigned mouse or keyboard event listeners.

and

video and onVideo select are missing in props validation

import React from 'react';

const VideoListItem = ({ video, onVideoSelect }) => {
  const imageUrl = video.snippet.thumbnails.default.url;

  return (
    <li onClick={() => onVideoSelect(video)} className="list-group-item">
      <div className="video-list media">
        <div className="media-left">
          <img className="media-object" src={imageUrl} alt="Media" />
        </div>

        <div className="media-body">
          <div className="media-heading">{video.snippet.title}</div>
        </div>
      </div>
    </li>
  );
};

export default VideoListItem;

Will someone please assist me in the proper way of correcting these issues.

Answer 1

First warning means, that you should not have onClick event listener on li element, only on element like <a> or <button> element.

Second warning is about not using PropTypes package - you should validate props you are passing to your component - it says what the passed props should be - in your case video is an object, onVideoSelect is a function, right? You use the package https://www.npmjs.com/package/prop-types like this:

import PropTypes from 'prop-types'; // or PropTypes = require('prop-types');

const VideoListItem = ({ video, onVideoSelect }) => {...};

VideoListItem.propTypes = {
  video: PropTypes.object.isRequired,
  onVideoSelect: PropTypes.func.isRequired,
};

If you omit isRequired, you'll get warning about not having default value for props (assuming you are using airbnb linter config - it looks like it). You can fix it like this:

VideoListItem.defaultProps = {
  video: {},
  onVideoSelect: () => {},
}