React: Expected an assignment or function call and instead saw an expression

Question

I am trying to fix this lint error at line const def = (props) => { in following sample code.

const propTypes = { prop1: PropTypes.string, prop2: PropTypes.string, prop3: PropTypes.string, prop4: PropTypes.string, prop5: PropTypes.string, }  const abc = (props) => { some code here }  const def = (props) => { <div> <div className=" ..some classes..">{abc}</div> <div className=" ..some classes..">{t('translation/something')}</div>  <div ...>   <someComponent      do something   />  if (some condition) { do this } else { do that }  </div>  }; 

Any idea why i am getting this lint error?

Answer 1

You are not returning anything, at least from your snippet and comment.

const def = (props) => { <div></div> };

This is not returning anything, you are wrapping the body of the arrow function with curly braces but there is no return value.

const def = (props) => { return (<div></div>); }; OR const def = (props) => <div></div>;

These two solutions on the other hand are returning a valid React component. Keep also in mind that inside your jsx (as mentioned by @Adam) you can't have if ... else ... but only ternary operators.