React Anonymous Component Function ESLint Errors

Question

I need help resolving these lint errors on this React anonymous function.

export default {
  "text": () => { return <div className="item-icon">txt</div>; },
  "image": (props) => { return <img className="preview-img" src={props.src} alt=''/>; }
};

Here are the lint errors

  4:11  error  Component definition is missing display name  react/display-name
  5:12  error  Component definition is missing display name  react/display-name
  5:72  error  'src' is missing in props validation          react/prop-types

Answer 1

this resolved them.

const text = () => { return <div className="item-icon">txt</div>; };
text.displayName = 'text';

const image = (props) => { return <img className="preview-img" src={props.src} alt=''/>; }
image.displayName = "image";
image.propTypes = {
  src: PropTypes.string
};

export default { text, image }

Answer 2

you can add a comment eslint-disable and there will be no error

/*eslint-disable */
export default {
  "text": () => { return <div className="item-icon">txt</div>; },
  "image": (props) => { return <img className="preview-img" src={props.src} alt=''/>; },
  "audio": () => { return <div className="item-icon">audio</div>; },
  "video": () => { return <div className="item-icon">video</div>; },
  "application": () => { return <div className="item-icon">{"< />"}</div>; },
  "application/pdf": () => { return <div className="item-icon">pdf</div>; },
};