Handle the Error “expected an assignment or function call and instead saw an expression”

JavaScript is a well-known programming language widely used to create website pages and applications in the best interactive way. Numerous scripting codes are being used by programmers as well as developers to make user-friendly designs. Websites can’t be complete without JavaScript programs. JavaScript makes programming simpler for programmers as well as beginners by providing libraries and frameworks. React is a JavaScript library designed to create an interactive interface. It is created by Facebook to create front-end applications. When working with react.js, you may encounter the error “expected an assignment or function call and instead saw an expression”.

It is normal to have error warnings, though it always seems frustrating. No need to worry anymore as you are here to find the solution to remove the error. Check out how the error occurs

How the error occurs

When you are trying to make a sidebar, you end up with the following error warning

error: Expected an assignment or function call and instead saw an expression

The error shows up when using the following program

{SidebarData.map((item,index) => {
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
})}

Solutions To Fix the Error “expected an assignment or function call and instead saw an expression”

Solution 1 – Remove curly brackets

{SidebarData.map((item,index) => (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
))}

The first thing you need to check is the curly brackets and where you place them. The right approach is to remove the curly brackets. Have a look at the code below

It is an effective way to resolve the error.

Solution 2 – Use ‘return’

To make the code works, you need to use the keyword ‘return’. The map function gives JSX code. In the case of using curly brackets, it is important to use ‘return’. Take a look at the below code

{SidebarData.map((item,index) => return {
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
})}

Solution 3 – Use a round bracket

Round bracket “(“ needs to be placed in the line you place ‘return’ like ‘return(‘. This is how you can do this

return(
<React.Fragment>
<span>{this.formatCount()}</span>
<button type="button" className="btn btn-primary">Increment</button>
</React.Fragment>
)

It can resolve the error warning.

Solution 4 – Use parenthesis

To solve the error, you need to use parenthesis around the curved brackets. See the following code to understand the concept in a better way

const mapStateToProps = (state) => ({
players: state
});

Conclusion

In this post, we have highlighted the solutions to fix the error “expected an assignment or function call and instead saw an expression” in an efficient way.

I hope it helps! I wish you happy coding! If you need further assistance, feel free to drop a message in the comment box below!