How to solve error “Expected an assignment or function call and instead saw an expression”

March 4, 2022

Error Messages

The error “Expected an assignment or function call and saw an expression instead” is thrown when JSLint, JSHint, or ESLint encounters an invalid expression. This error is raised to highlight a piece of code that is useless and unnecessary. The code should work as expected but since a single floating expression doesn’t affect anything there’s no sense there.

How to identify errors “Expected an assignment or function call and instead saw an expression”

This error occurs when you wrap the function body with curly braces ({}) but do not return any value. Here are some of the displays you might see:

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

when displaying fullcode:

Error with SidebarData.js items:

import React from 'react';
import {X, Tag, FileEarmarkPostFill,PersonBadge,CashStack,Tools} from 'react-bootstrap-icons'

export const SidebarData = [
    {
        title: 'Administration',
        path: '/admin',
        icon: <X />,
        cName: 'nav-text'
    },
    {
        title: 'Category',
        path: '/admin/category',
        icon: <Tag />,
        cName: 'nav-text'
    },
    {
        title: 'Product',
        path: '/admin/product',
        icon: <FileEarmarkPostFill />,
        cName: 'nav-text'
    },
    {
        title: 'Order',
        path: '/admin/order',
        icon: <CashStack />,
        cName: 'nav-text'
    },
    {
        title: 'User',
        path: '/admin/user',
        icon: <PersonBadge />,
        cName: 'nav-text'
    },
    {
        title: 'Support',
        path: '/admin/support',
        icon: <Tools />,
        cName: 'nav-text'
    },
]

How to solution the error

For quick resolution, You should know how to use both () and {}. We already know that parentheses are used to pass parameters in functions and curly braces are used to indicate the scope of something. However, in ES6, parentheses can also be used for return elements. So you can see that (some jsx) is the same as {return(some jsx)}.

For example, the below code will work when use the keyword “return” or simply return the code by enclosing it inside parentheses.

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

or the other way:

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

Conclusion

In general, resolving the error “Expected an assignment or function call and instead saw an expression” is indeed not difficult. Hope our above article is useful for you. If there is still something that cannot be resolved, please do not hesitate to contact us!

Related articles

Scroll to Top