expected assignment or function call: no-unused-expressions ReactJS
ReactjsJsxReactjs Problem Overview
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
Reactjs Solutions
Solution 1 - Reactjs
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.
Put your opened bracket on the same line with the return
.
Solution 2 - Reactjs
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>
}
Solution 3 - Reactjs
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.
Solution 4 - Reactjs
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>;
));
Solution 5 - Reactjs
In my case i never put return inside a arrow function so my code is follow
`<ProductConsumer>
{(myvariable)=>{
return <h1>{myvariable}</h1>
}}
</ProductConsumer> `
Solution 6 - Reactjs
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>
);
Solution 7 - Reactjs
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>
));
Solution 8 - Reactjs
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...
Solution 9 - Reactjs
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;
Solution 10 - Reactjs
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();
}
}
Solution 11 - Reactjs
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
- Use the parentheses i.e ()
- 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
Solution 12 - Reactjs
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.
Solution 13 - Reactjs
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;
}
Solution 14 - Reactjs
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.
Solution 15 - Reactjs
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.
Solution 16 - Reactjs
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
};
});
}
Solution 17 - Reactjs
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.