Question 73516 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Error with React Menu – Expected an assignment or function call and instead saw an expression – Reactjs

I’m new to React so bear with me.

I’m trying to build out a side menu navigation. This is the beginning of the application so I will be adding more nav titles in the future. To future proof, I’m trying to store the key/labels for the item tags in an array. Within React render, I’m trying to iterate over the array and insert the key/label accordingly. However, I’m running into the below error. Line 41 corresponds to key: menuItem["key"];.

Why do I see this error and how do I fix it?

Line 41:11: Expected an assignment or function call and instead saw an expression

import '../../src/index.css';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const menuItems = [
      {
          key: "nav1",
          label: "Nav 1"
      },
      {
          key: "nav2",
          label: "Nav 2"
      }
  ]


  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={(broken) => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          items={menuItems.forEach((menuItem) => {
              key: menuItem["key"];
              label: menuItem["label"];
              })
          }
        />
      </Sider>
    </Layout>
  );
};

export default App;
Tags:

3

Answers


  1. 0

    Try this way

     <Menu
   theme="dark"
   mode="inline"
   items={menuItems.forEach((menuItem) => {
     key={menuItem.key};
     label={menuItem.label};
    })
   }
 />

    When you do a foreach, it traverses each object "{}" and to access the array of object that is traversing you use the point like "menuItem.key" and in React you put it like this "{menuItem.key}".

    So if i have one array like this:

     const menuItems = [ // array open
  { // object open
      key: "nav1",
      label: "Nav 1"
  }, // object close
  { // another object open
      key: "nav2",
      label: "Nav 2"
  } // another object close
  ]  // array close
    Login or Signup to reply.
  2. 0

    There are two things wrong with your code.

    The first is the syntax error that is caused by { } in JavaScript being both the function body syntax and object syntax.

    In the context of an arrow function () => {} the { } means you are opening up the body of the function. This means you have to return from the body instead of it being implicit (no function body).

    To correct this, you can simply wrap the function body in parenthesis so that it treats it as an implicit return, and treats the { } as an object instead:

    (menuItem) => ({
  key: menuItem["key"];
  label: menuItem["label"];
})

    The second problem is that forEach does not accept a return value. You need to use map.

    items={menuItems.map((menuItem) => ({
  key: menuItem["key"];
  label: menuItem["label"];
}))}

    Note

    Unless your code is simplified for the question’s sake, your loop is completely unnecessary. You are mapping the objects into new objects that have the same values.

    If this is truly the case, you can remove this completely from your code and just do items={menuItems}.

    Login or Signup to reply.
  3. 0

    I think the problem is that you are looping inside the Menu component. Try this solution.

      {menuItems.forEach(menuItem => {
    <Menu
      theme="dark"
      mode="inline"
      items={{
        key: menuItem.key,
        label: menuItem.label
      }}
    />
  })}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search