React error [Expected an assignment or function call and instead saw an expression]

Question

Today i'm trying to make a Sidebar by following a tutorial after many packages...

So tutorial link can be found at youtube here

Here is my code who react don't like:

ERROR:

Line 24:25: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error.

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

Full code


import React, {useState} from 'react'
import {Link} from "react-router-dom";
import {List,X} from "react-bootstrap-icons";
import { SidebarData} from "./SidebarData";

function Sidebar(){

    const [sidebar,setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <>
            <div className="navbar">
                <Link to='#' style={{fontSize:"50px"}}>
                    <List onClick={showSideBar}/>
                </Link>
            </div>
            <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
                <ul className="nav-menu-items">
                    <li className="navbar-toggle">
                        <Link to='#' className="menu-bars" style={{fontSize:"50px"}}><X /></Link>
                    </li>
                    {SidebarData.map((item,index) => {
                        <li key={index} className={item.cName}>
                            <Link to={item.path}>
                                {item.icon}
                                <span>{item.title}</span>
                            </Link>
                        </li>
                    })}
                </ul>
            </nav>
    </>
    )
}

export default Sidebar;

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'
    },
]

I don't really know the error and how to fix it.

One issue with that code is that your `map` callback doesn't return anything. More: https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value. — T.J. Crowder, Sep 09 '20 at 16:23

score 1 · Answer 1 · answered Sep 09 '20 at 16:25

Seems like you are not returning anything from .map Try this:

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

score 1 · Accepted Answer · answered Sep 09 '20 at 16:33

Your map function should return JSX code to work. When you are using curly braces you should use the keyword return or simply return the code by wrapping it inside parentheses.

example -

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

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

Both will work.

React error [Expected an assignment or function call and instead saw an expression]

2 Answers2