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

React throws the error “expected an assignment or function call and instead saw an expression no-unused-expressions” in the situations when we wrongly put parenthesis () and curly braces {}.

You should know the difference in use of both () and {}. We already know that parenthesis are used to pass parameters in functions and curly braces are used to indicate the scope of something.

But, in ES6, parenthesis could also be used to return elements. For example –

someArray.map((ele) => (
  <div>{ele}</div>
))

is same as –

someArray.map((ele) => {
  return <div>{ele}</div>
})

So, you can see that (some jsx) is same as {return(some jsx)}. But you can use parenthesis for returning only when the whole scope is to be returned and no separate computation is to be done. For example, the below code won’t work because we are using parenthesis to return but doing computations as well –

someArray.map((ele) => (
  const newEle = ele * 8;
  <div>{newEle}</div>
))

The correct way of doing this is either –

someArray.map((ele) => (
  <div>{ele * 8}</div>
))

or

someArray.map((ele) => {
  const newEle = ele * 8;
  return (<div>{newEle}</div>)
})

Another reason for getting this react error – expected an assignment or function call is lexical grammar. Check this code –

function App(){
  return
  (
    <div></div>
  )
}

This code will create react error of expected assignment or function call. Do you know why? Because it has lexical grammar error. Internally the javascript will convert this code to this –

function App() {
  return;
  (
    <div></div>
  )
}

We call this automatic semicolon insertion. Always use opening parenthesis is the same line as function name. Since return could be used without parenthesis as well so JavaScript compiler need to know if you are returning something spanned in single line or multi line. You may use the above function in either of ways –

function App() {
  return(
    <div></div>
  )
}

function App() {
  return <div></div>;
}

    Tweet this to help others

ASI (automatic semicolon insertion) works in these conditions –

• Empty statement
• let, const, variable statement
• import, export, module declaration
• Expression statement
• debugger
• continue, break, throw
• return

The 3 rules of ASI by ECMAScript are –

When, as the source text is parsed from left to right, the end of the input stream of tokens is encountered and the parser is unable to parse the input token stream as a single instance of the goal nonterminal, then a semicolon is automatically inserted at the end of the input stream.

When, as the source text is parsed from left to right, a token is encountered that is allowed by some production of the grammar, but the production is a restricted production and the token would be the first token for a terminal or nonterminal immediately following the annotation “[no LineTerminator here]” within the restricted production (and therefore such a token is called a restricted token), and the restricted token is separated from the previous token by at least one LineTerminator, then a semicolon is automatically inserted before the restricted token.

Live Demo