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?

There's nothing wrong with that line. It's the line after where you've got HTML instead of JS. — jmargolisvt, Aug 08 '17 at 16:15
You can't have and `if` inside jsx. You need to use the `condition ? if true : if false` syntax. — Adam LeBlanc, Aug 08 '17 at 16:17
i get the same lint error even if i just do `const def = (props) => {

};` — User7354632781, Aug 08 '17 at 16:23
Duplicate of [List elements not rendering in React](/q/40324352/4642212) and [When should I use a return statement in ES6 arrow functions](/q/28889450/4642212). — Sebastian Simon, Jan 29 '23 at 09:42

score 93 · Answer 1 · answered Aug 08 '17 at 16:38

93

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.

answered Aug 08 '17 at 16:38

G4bri3l

4,996
4
31
53

Thanks. if i do `onst def = (props) =>
;` i get error `Unexpected parentheses around single function argument having a body with no curly braces` and if i do `const def = (props) => { return (
); };` i get error `Unexpected block statement surrounding arrow body ` – User7354632781 Aug 08 '17 at 17:01
Then just try `const def = props => (
);` – G4bri3l Aug 08 '17 at 17:12
Thanks again. with that it wont show the error but i am getting `PropName is missing in props validation` for all the pros inside it. any idea why? – User7354632781 Aug 08 '17 at 17:43
Yes you need to add every prop you use in the component inside the prop validation. You might want to check out the docs, you seem to be missing many key basics of React. https://facebook.github.io/react/docs/typechecking-with-proptypes.html – G4bri3l Aug 08 '17 at 21:24
adding `return` to `` solved my issue – Jghorton14 Sep 03 '18 at 01:15

score 25 · Answer 2 · edited Apr 08 '20 at 14:37

25

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
});

edited Apr 08 '20 at 14:37

johannchopin

13,720
10
55
101

answered Dec 23 '19 at 08:49

Steven

1,071
15
15

3

What is the reason to do so? – Nisan Abeywickrama Apr 03 '20 at 08:45
I faced the same situation. I can't explain why it does work if you add the parentheses, tho. – Paulo Henrique Queiroz Apr 10 '20 at 21:31
You saved my time, @Steven. Thanks! – iconique Apr 24 '20 at 19:50
1

@NisanAbeywickrama , parentheses are used to return object, instead of doing : const mapStateToProps = (state) => { return { players: state } }; – ghazouan badr May 03 '20 at 02:01
Even I want to know why this parenthesis bcz the fat arrow function should be ()=>{ multi line expression } not ()=({ multi line expression }) – subhashis Jun 02 '21 at 02:45

score 10 · Answer 3 · edited Apr 08 '20 at 14:38

10

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>
);

edited Apr 08 '20 at 14:38

johannchopin

13,720
10
55
101

answered Feb 13 '20 at 05:59

ruwanmadhusanka

851
2
8
15

2

this worked for me. I got the same message because I had a .map and I was using {} instead of () to return the component/jsx Thanks! – Matias Seguel Apr 06 '20 at 02:40

score 3 · Answer 4 · answered Jul 28 '20 at 18:29

3

Not sure about solutions but a temporary workaround is to ask eslint to ignore it by adding the following on top of the problem line.

// eslint-disable-next-line @typescript-eslint/no-unused-expressions

answered Jul 28 '20 at 18:29

Zoe L

1,150
14
22

score 2 · Answer 5 · answered Dec 07 '19 at 18:35

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>
  )
}

score 1 · Answer 6 · answered Feb 28 '20 at 07:54

You use a function component:

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>

};

In the function component, you have to write a return or just add parentheses. After the added return or parentheses your code should look like this:

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>
});

score 1 · Answer 7 · answered Apr 29 '22 at 13:19

In my case the eslint error was caused by an unexpected use case. Hence the code was correct, but eslint failed:

cy.customCommand().then(obj => {
      expect(obj.booleanProp).to.be.true;
    });

eslint finds an expression which is generated, but not used. That the generation produces a result (potential exception) is beyond the analyzer.

In defense of eslint: I don't expect the analyzer to anticipate this side effect. And it's foremost usecase (prevent you from unfinished code-lines) is important. So nobody to blame..

I'd suggest to just disable the warning linewise like this:

cy.customCommand().then(obj => {
      // eslint-disable-next-line no-unused-expressions
      expect(obj.booleanProp).to.be.true;
    });

This was exactly my case and I was getting really frustrated. Thank you! — Martin Shishkov, Oct 13 '22 at 11:35

score 1 · Answer 8 · answered Dec 08 '22 at 18:30

This Error Happens If you Don't add return before statement.

In my case I was Using

str.charAt(0).toUpperCase() + str.slice(1);

which is Incorrect. We have to Add return before this statement.

Like This

return str.charAt(0).toUpperCase() + str.slice(1);

Hope this will Help You.

score 1 · Answer 9 · answered Apr 03 '23 at 10:16

1

enter image description here

I got this error once when I have not returned the value when I was using useSelector.

answered Apr 03 '23 at 10:16

ABHISEK KUMAR

11
1

score 0 · Answer 10 · answered Mar 24 '20 at 16:27

In my case the problem was the line with default instructions in switch block:

  handlePageChange = ({ btnType}) => {
    let { page } = this.state;
    switch (btnType) {
      case 'next':
        this.updatePage(page + 1);
        break;
      case 'prev':
        this.updatePage(page - 1);
        break;
      default: null;
    } 
  }

Instead of

default: null;

The line

default: ;

worked for me.

mozey · Answer 11 · 2021-03-11T07:41:40.077

The fault is within your if statement. Had same error some time ago. I got to noticed that Within my ternary operator, I was having lines of code sepereted from each other by commas, changed to using if statement still was having same error.

I corrected it by sepereting the expressions and giving each a seperate if statement (works with ternary operator too) but in the end, I was having too many redundant codes...annoying. Have not found any solution since then

score 0 · Answer 12 · edited Aug 04 '21 at 12:35

Firstly you must have at least one "return" before your parent div tag in your function as follows

const def = (props) => {    
   return(
       <div>
        [some other child div/codes here]    
       </div>
   )
};

Or, you can use an Arrow function in a single line as:

const def = (props) => `<div> [some other child div/codes here] </div>`

In this case "return" is not compulsory.

Secondly, you should use "Conditional (ternary) Operator".

navinrangar · Answer 13 · 2022-10-20T09:39:38.697

Mostly this error occurs because we don't 'return' correctly. The most common solution to it is to put a pair of parenthesis () around your function's curly braces {}.

The following code will produce error. See there is no return.

const MyComponent= (state) => {
    anything: state;
}

This is how you should write it correctly so that you don't see an error.

const MyComponent= (state) => ({
    anything: state
});

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

13 Answers13

Linked

Related