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

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
Expected an assignment or function call and instead saw an expression
const todoList = ({ todos, onTodoclick }) => {
    return (<ul>
        {
            todos.map(todo => {
                <Todo key={todo.id}
                    {...todo}
                    onClick={() => onTodoclick(todo.id)}>
                </Todo>
            })
        }
    </ul>)
}

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.

const todoList = ({ todos, onTodoclick }) => (
    <ul>
        {
            todos.map(todo =>
                <Todo key={todo.id}
                    {...todo}
                    onClick={() => onTodoclick(todo.id)}>
                </Todo>
            )
        }
    </ul>
)

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

import React from 'react';

class Counter extends React.Component{
    state = {
        count: 0,
    };

    formatCount() {
        const {count} = this.state;
        // use a return statement here, it is a importent,
        return count === 0 ? 'Zero' : count;
    }
    render() {
        return(
          <React.Fragment>
              <span>{this.formatCount()}</span>
              <button type="button" className="btn btn-primary">Increment</button>
          </React.Fragment>
        );
    }
}

export default Counter;

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

Summery

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.

Default image
Shivaraju M
Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am currently focused on continuous improvement and agile project management.

Leave a Reply