[Solved] Expected an assignment or function call and instead saw an expression no-unused-expressions in reactJS

byShivaraju M -October 10, 2021

0

Problem

I’m getting the below error in the functional component of the ReactJs application.

it’s giving this error

Expected an assignment or function call and instead saw an expression  no-unused-expressions

Solution

After an overview of the component file, I understand that in my case, This happens because I put a bracket on the return statement.

The interpreter thinks that you return undefined and doesn’t check your next line. That’s the return operator thing.

Functional Component Example

Since in my functional component, once realized that arrow functions occasionally needed return so, I Put opened bracket ( on the same line after => lamda expression, and removed the return statement as shown in the right-side image.

I wanted to use curly braces I had to add the return keyword, like so:

If You’re using JSX inside a function with curly braces you need to modify it to parenthesis.

Wrong Code:

return this.props.todos.map((todo) => {
            <h3> {todo.author} </h3>
        });

Correct Code

//Change Curly Brace To Paranthesis   change {} to => ()
return this.props.todos.map((todo) => (
             <h3> {todo.author} </h3>
        ));

Class Component Example

Here is the class component example, deeply observe the return statement of the class component

Instead of

  return 
 (
  <React.Fragment >
               <span >{this.formatCount()} </span >
               <button type="button" className="btn btn-primary" >Increment </button >
           </React.Fragment >
 )

Use Below Code

return(
   <React.Fragment >
               <span >{this.formatCount()} </span >
               <button type="button" className="btn btn-primary" >Increment </button >
           </React.Fragment >
  )

Basically use brace “(“ in the same line of return like “return(“. It will fix this issue

Summary

In the above article, we understand that a very common lambda syntax typo mistakes lead to a difficult error, without understanding the comment javascript syntax may lead to such types of issues. So, I hope you find them helpful.

Tags JavaScript React