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
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();
}
}
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.
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
};
});
}
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>
}
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.
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
(
<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.
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 curly braces to parenthesis, as indicated in the below modified code snippet.
return this.state.employees.map((employee) => (
<option value={employee.id}>
{employee.name}
</option>
));
In my case it is happened due to curly braces of function if you use jsx then you need to change curly braces to Parentheses, see below code
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...
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>;
));
In my case i never put return inside a arrow function so my code is follow
`<ProductConsumer>
{(myvariable)=>{
return <h1>{myvariable}</h1>
}}
</ProductConsumer> `
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
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
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>
);
Source: Stackoverflow.com