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

Question

I want to fix lint error at line:  const def = (props) => {
This is my 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>

};

Can someone help me fix this issue?

Answer 1

The problem is that there is no return value:

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

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

Use this:

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

Or

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

This will return a valid React component. Inside your jsx you can't have if ... else ... but only ternary operators.

I hope this helps.

Answer 2

Return Function is missing please add Return 

const def = (props) => {

return (
<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>)

};