expected assignment or function call: no-unused-expressions ReactJS

Question

class Game extends Component 
{
  constructor() 
  {
    super()
    this.state = {
      speed: 0
    }
    //firebaseInit()
  }
  render()
  {
    return 
    (
      <div>
        <h1>The Score is {this.state.speed};</h1>
      </div>
    )
  }
}

export default Game;

I am new to React and for this code its giving this error

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

Dont understand where getting wrong, please help

Answer 1

This happens because you put bracket of return on the next line. That might be a common mistake if you write js without semicolons and use a style where you put opened braces on the next line.

Interpreter thinks that you return undefined and doesn't check your next line. That's the return operator thing

Answer 2

In my case I had curly braces where it should have been parentheses.

const Button = () => {
    <button>Hello world</button>
}

Where it should have been:

const Button = () => (
    <button>Hello world</button>
)

The reason for this, as explained in the MDN Docs is that an arrow function wrapped by () will return the value it wraps, so if I wanted to use curly braces I had to add the return keyword, like so:

const Button = () => {
    return <button>Hello world</button>
}

Answer 3

For me the error occured when using map. And I didn't use the return Statement inside the map.

{cart.map((cart_products,index) => {
    <span>{cart_products.id}</span>; 
})};

Above code produced error.

{cart.map((cart_products,index) => {
    return (<span>{cart_products.id}</span>); 
})};

Simply adding return solved it.

Answer 4

If you're using JSX inside a function with braces you need to modify it to parentheses.

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

Answer 5

In my case i never put return inside a arrow function so my code is follow

`<ProductConsumer>
   {(myvariable)=>{
      return  <h1>{myvariable}</h1>
   }}
</ProductConsumer> `

Answer 6

In my case I used commas instead of semicolons in constructor.

Example with errors:

class foo(bar1, bar2, bar3){
    this.bar1=bar1,
    this.bar2=bar2,
    this.bar3=bar3,

}

instead I should have used semicolons like underneath:

class foo(bar1, bar2, bar3){
    this.bar1=bar1;
    this.bar2=bar2;
    this.bar3=bar3;
}

Answer 7

In my case the error happened because the new line after the return statement.

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

return
(
    <ul>
        {
            props.numbers.map(number => <li key={number.toString()}>number</li>)
        }
    </ul>
);

Working OK. No Error

return (
    <ul>
        {
            props.numbers.map(number => <li key={number.toString()}>number</li>)
        }
    </ul>
);

Answer 8

I encountered the same error, with the below code.

    return this.state.employees.map((employee) => {
      <option value={employee.id}>
        {employee.name}
      </option>
    });

Above issue got resolved, when I changed braces to parentheses, as indicated in the below modified code snippet.

      return this.state.employees.map((employee) => (
          <option value={employee.id}>
            {employee.name}
          </option>
        ));

Answer 9

In my case it is happened due to braces of function if you use JSX then you need to change braces to parentheses:

const [countries] = useState(["USA", "UK", "BD"])

I tried this but not work, don't know why

 {countries.map((country) => {
        <MenuItem value={country}>{country}</MenuItem>
  })}

But when I change Curly Braces to parentheses and Its working fine for me

  {countries.map((country) => ( //Changes is here instead of {
        <MenuItem value={country}>{country}</MenuItem>
  ))} //and here instead of }
             

Hopefully it will help you too...

Answer 10

Solution: Move the start of opening bracket...

When you use the return keyword, just make sure that the START of the bracket is ON THE SAME LINE as the return keyword. If you don't do this, you will get a bug.

Answer 11

In my case I replaced , with ;

Change from this

<Button
    onClick={() => {
        function1(), function2();
    }}>
    Click
</Button>

to this

<Button
    onClick={() => {
        function1();
        function2();
    }}>
    Click
</Button>

Answer 12

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;

Answer 13

In my case I have got this error, because used a call inside of the condition without a semicolon:

  private async _setActive(active: boolean) {
    if (this.isActive === active) {
      return;
    }
    this.isActive = active;

    this.isActive ? this._start() : this._stop();
  }

I changed it, and the error has gone:

  private async _setActive(active: boolean) {
    if (this.isActive === active) {
      return;
    }
    this.isActive = active;

    if (this.isActive) {
      await this._start();
    } else {
      this._stop();
    }
  }

Answer 14

The error - "Expected an assignment or function call and instead saw an expression no-unused-expressions" comes when we use curly braces i.e {} to return an object literal expression. In such case we can fix it with 2 options

1. Use the parentheses i.e ()
2. Use return statement with curly braces i.e {}

Example :

const items = ["Test1", "Test2", "Test3", "Test4"];
console.log(articles.map(item => { `this is ${item}` })); // wrong
console.log(items.map(item => (`this is ${item}`))); // Option1
console.log(items.map(item => { return `this is ${item}` })); // Option2

Answer 15

In case someone having a problem like i had. I was using the parenthesis with the return statement on the same line at which i had written the rest of the code. Also, i used map function and props so i got so many brackets. In this case, if you're new to React you can avoid the brackets around the props, because now everyone prefers to use the arrow functions. And in the map function you can also avoid the brackets around your function callback.

props.sample.map(function callback => (
   ));

like so. In above code sample you can see there is only opening parenthesis at the left of the function callback.

Answer 16

Instead of

 return 
 (
  <div>
    <h1>The Score is {this.state.speed};</h1>
  </div>
 )

Use Below Code

 return(
   <div>
     <h1>The Score is {this.state.speed};</h1>
   </div>
  )

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

Answer 17

In my case, I got the error on the setState line:

increment(){
  this.setState(state => {
    count: state.count + 1
  });
}

I changed it to this, now it works

increment(){
  this.setState(state => {
    const count = state.count + 1

    return {
      count
    };
  });
}

Answer 18

Just want to add my solution in case anyone else is experiencing this error. In my case it didn't have anything to do with brackets, an arrow function or a missing return statement. I had a check like this

if (this.myProperty) {
    this.myProperty == null
}

I had to remove this then the error went away. It was difficult to figure this out because the error message was not at all descriptive.