React error Expected an assignment or function

The text starts here~

Overview

"Expected an assignment or function call and instead saw an expression" error occurs when we forget to return a value from a function. To resolve this error, be sure to use the return statement explicitly or use an arrow function to return implicitly.

Below are two examples to show how the error can be generated.

 // App.js

const App = props => {
  const result = ['a', 'b', 'c'].map(el => {
    // ⛔️ Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions
    el + '100';
  });

  return <div>hello world</div>;
};

const mapStateToProps = (state) => {
  // ⛔️ Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions
  todos: ['walk the dog', 'buy groceries']
}

export default App;

In the App component, the error is caused in the Array.map() method. The problem here is that we are not returning an arbitrary value from the callback function passed to the map() method.

In a JavaScript function, if we do not explicitly use the return statement, or use an arrow function to implicitly return a value, then undefined is returned.

mapStateToProps The problem is the same in the function, we forget to return the value from the function.

explicit return

To fix the error, we have to either explicitly use the return statement or use an arrow function to return the value implicitly.

Below is an example of how to use explicit return to resolve this error.

 const App = props => {
  const result = ['a', 'b', 'c'].map(el => {
    return el + '100'; // 👈️ using explicit return
  });

  console.log(result);

  return <div>hello world</div>;
};

const mapStateToProps = state => {
  return {todos: ['walk the dog', 'buy groceries']}; // 👈️ using explicit return
};

export default App;

We solved the problem by explicitly returning in the map() method. This is necessary because the Array.map method returns an array containing all the values returned by the callback function we passed to it.

Note that when you return from a nested function, you are not also returning from the outer function.

implicit return

Another way is to use the implicit return of arrow functions.

 // 👇️ implicit return
const App = props => (
  <div>
    <h2>hello</h2>
    <h2>world</h2>
    {['a', 'b', 'c'].map(element => (
      <div key={element}>{element}</div>
    ))}
  </div>
);

// 👇️ implicit return
const result = ['a', 'b', 'c'].map(element => element + '100');
console.log(result); // 👉️ ['a100', 'b100', 'c100']

// 👇️ implicit return
const mapStateToProps = state => ({
  todos: ['walk the dog', 'buy groceries'],
});

export default App;

We use an implicit arrow function return for the App component.

It's important to note that we didn't use curly braces at all. The short implicit return uses parentheses.

return object

If we use implicit return to return an object, we must wrap the object in parentheses.

 // ✅ RIGHT
const mapStateToProps = state => ({
  todos: ['walk the dog', 'buy groceries'],
});

// ⛔️ WRONG
const msp = state => {
  // ⛔️ Expected an assignment or function call and instead saw an expression.eslint no-unused-expressions
  todos: ['walk the dog', 'buy groceries']
};

A simple way to think about it is -- when you use curly braces without wrapping them in parentheses, you are declaring a block of code (like a if statement).

 {
  console.log('this is my block of code');
}

When you don't use parentheses, you have a block of code, not an object.

But when you wrap curly braces with parentheses, you have an implicit arrow function return.

If you think the eslint rule should not cause an error in your scheme, you can turn off the eslint rule by using a comment.

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

Comments should be placed just above the line that caused the error.