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?
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.
Expected an assignment or function call and instead saw an expression.
I had this similar error with this code:
const mapStateToProps = (state) => {
players: state
}
To correct all I needed to do was add parenthesis around the curved brackets
const mapStateToProps = (state) => ({
players: state
});
You must return something
instead of this (this is not the right way)
const def = (props) => { <div></div> };
try
const def = (props) => ( <div></div> );
or use return statement
const def = (props) => { return <div></div> };