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

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.

Answer

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.

Advertisement

Answer