score:166
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
.
score:0
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.
score:0
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
};
});
}
score:0
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.
score:1
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;
score:1
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();
}
}
score:1
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
score:1
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.
score:1
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;
}
score:2
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>
);
score:2
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>
));
score:2
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...
score:2
score:4
in my case i never put return inside a arrow function so my code is follow
`<productconsumer>
{(myvariable)=>{
return <h1>{myvariable}</h1>
}}
</productconsumer> `
score:14
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>;
));
score:40
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.
score:103
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>
}
Source: stackoverflow.com
Related Query
- Expected an assignment or function call and instead saw an expression in reactjs while using graphcms
- unused expression, expected an assignment or function call
- Expected an assignment or function call error in ReactJS
- Expected an assignment or function call and instead saw an expression no-unused-expressions- ReactJs
- ReactJs - Expected an assignment or function call and instead saw an expression
- ReactJs Newbie Getting Expected an assignment or function call and instead saw an expression no-unused-expressions
- ReactJS Filter Box: Expected an assignment or function call and instead saw an expression no-unused-expressions
- Expected an assignment or function call and instead saw an expression : no unused expression
- expected assignment or function call: no-unused-expressions ReactJS
- React: Expected an assignment or function call and instead saw an expression
- React: expected an assignment or function call and instead saw an expression no-unused-expressions
- Expected an assignment or function call and instead saw an expression.eslintno-unused-expressions
- Expected an assignment or function call and instead saw an expression error
- p5 js in react : Expected an assignment or function call and instead saw an expression no-unused-expressions
- React: Expected an assignment or function call and instead saw an expression in JSX
- Expected an assignment or function call and instead saw an expression on ternary
- React - Expected an assignment or function call and instead saw an expression failed to compile
- warning Expected an assignment or function call and instead saw an expression
- code works but gives: Expected an assignment or function call
- Rendering in a map function lead to a JsLint error as Expected an assignment or function call and instead saw an expression?
- ReactJS error: "Expected an assignment or function call and instead saw an expression"
- React Expected an assignment or function call and instead saw an expression
- How to fix 'React: Expected an assignment or function call and instead saw an expression'( state assignment)?
- Getting Expected an assignment or function call and instead saw an expression no-unused-expressions error when trying to render a component in React
- how to fix ' Expected an assignment or function call and instead saw an expression'
- Why Am I Getting An Expected an Assignment or Function Call and Instead Saw an Expression?
- useAutocomplete Uncaught TypeError: Cannot read property 'filter' of undefined or Expected an assignment or function call and instead saw expression
- JSLint is throwing an Error - Expected an assignment or function call and instead saw an expression
- React - Expected an assignment or function call
- Warning: expected an assignment or function call and instead saw an expression | Trying to manipulate onClick
More Query from same tag
- next react build failed with error Error: Package exports for '/app/node_modules/i18next-http-middleware' do not define a valid './cjs' target
- Calling a variable from fetch into React render function
- Unit Testing navigator.permissions.query({ name: 'geolocation' }) using Jest (React)
- How to use React context on search input and share the input with other components?
- How to avoid JSX component from condensing when React.js rendering it?
- React-Router-Bootstrap <LinkContainer> Error: You should not use <withRouter(LinkContainer) /> outside a <Router> - Gatsby problem?
- TextGeometry of Three.js with React not working
- react js button disable according to checking status
- ReactJS: Single onChange handler for multiple form inputs
- How To Setup Custom Claims In My React Website For a Login Page
- Cannot Open Dev Menu on Xiaomi Devices
- The server successfully processed the request but failed to return the data
- display one image at a time from fetched data from json
- React ReferenceError: document is not defined
- Reactjs component - one vs many
- Adding classes with React
- React: How to update an input box text when click a button?
- Material UI Autocomplete unique id problem
- Transforming markdown image into Next.js image realtime
- Do i need bindActionCreators?
- React CSS transition not working
- Draw a dashed path using Framer Motion in React
- Using jsPlumb with React
- React does not recognize the `activeKey` prop on a DOM element
- How to deal with using socket.io client within React state?
- Jquery Toggle on click of image
- Learning ReactJS: Uncaught SyntaxError: Unexpected token import
- Jest test passes but error not caught and logs to console
- How to Write Functional Tests in React-using Enzyme and Jest
- React does't Re-Render the App after fetching data from JSON Database