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

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

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

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

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

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

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.

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

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".

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

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 code is error free as it returns with parenthesis. const MyComponent= (state) => ({ anything: state });