CODEWITHSUNDEEP
javascriptreactjs
Jud3v Digital
Jud3v Digital

Reputation: 311

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.

Upvotes: 0

Views: 498

Answers (2)

bruce
bruce

Reputation: 36

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.

Upvotes: 1

pl2ern4
pl2ern4

Reputation: 375

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>
))

Upvotes: 1

Related Questions