. Advertisement .
..3..
. Advertisement .
..4..
React is considered as a declarative, flexible and efficient JavaScript library for building user interfaces. This allow you compose complex UIs from isolated and small code pieces called “components”.
You are working on a ReactJS application. A message displayed warns you: “Expected an assignment or function call and instead saw an expression”. You are finding out the way to remove this message and wonder why it happen. What are you waiting for? we will explain our effective solutions for your problem here in this post.
Why did the error: “Expected an assignment or function call and instead saw an expression” occur?
When making a Sidebar file in the program, you face an error: Expected an assignment or function call and instead saw an expression . This means you’ve created an expression, but don’t give the results to any variables. Jshint doesn’t care what the actual expression’s name is, or is there any side effects.
On the other hand, the “Expected an assignment or function call and instead saw an expression” error is thrown when JSLint, JSHint or ESLint encounters an expression with no effect or when the curly braces {} for body function but does not return any value.
One of the commands you are using a Sidebar file in the program and find the warning message as follow:
{SidebarData.map((item,index) => {
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
})}
How to resolve this error?
A simple method to fix this error comes from where this error happens. The error in curly braces and because we do not return value, then we fix this by the keyword “return “. Select the best option for your problem with the methods below.
Option 1: Use the keyword return
The function of map should return JSX code to work. When you are using curly braces you should add the keyword return
as follow:
{SidebarData.map((item,index) => return {
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
})}
Option 2: Remove the curly braces
Another method is to remove the curly braces. We will use it inside parentheses (). Let’s see:
{SidebarData.map((item,index) => (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
))}
Option 3: Add parenthesis
Add parenthesis around the curved brackets
const mapStateToProps = (state) => ({
players: state
});
Option 4: Use brace “(“
In this case, use brace “(“ in the same line of return like “return(“
Hope this way fix your error.
return(
<React.Fragment>
<span>{this.formatCount()}</span>
<button type="button" className="btn btn-primary">Increment</button>
</React.Fragment>
)
Conclusion
We hope you enjoyed our article about fixing the question “Expected an assignment or function call and instead saw an expression.” We are confident that with this information, you will be able to make the best method of your own and get the relevant information about this topic.
If you are still having any problems with your subjects, please feel free to leave us a comment. Thank you for reading!
Leave a comment