React: Expected an assignment or function call and instead saw an expression
Solution 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.
Solution 2
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
});
Solution 3
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> };
Solution 4
The return statements should place in one line. Or the other option is to remove the curly brackets that bound the HTML statement.
example:
return posts.map((post, index) =>
<div key={index}>
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
);
Solution 5
Possible way is (sure you can change array declaration to getting from db or another external resource):
const MyPosts = () => {
let postsRawData = [
{ id: 1, text: 'Post 1', likesCount: '1' },
{ id: 2, text: 'Post 2', likesCount: '231' },
{ id: 3, text: 'Post 3', likesCount: '547' }
];
const postsItems = []
for (const [key, value] of postsRawData.entries()) {
postsItems.push(<Post text={value.text} likesCount={value.likesCount} />)
}
return (
<div className={css.posts}>Posts:
{postsItems}
</div>
)
}
User7354632781
I am new to SQL and wanna learn it. There are excellent people on StackOverflow and appreciate any help from you guys. Thanks
Updated on August 05, 2021Comments
-
User7354632781 almost 3 years
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?