Cannot display unordered list using map

Question

I'm trying to display my nav items using map inside my Navbar component but it's not working. I got the error as: "Cannot read properties of undefined (reading 'map')". I don't know what is wrong. Please help me. Thank you so much!

Navbar.js:

import React from "react";
import navItems from "./NavItems";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <ul>
        {navItems.map((item) => {
          return (
            <li key={item.id} className={item.cName}>
              <Link to={item.path}>{item.title}</Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
export default Navbar;

NavItems.js:

export const navItems = [
  {
    id: 1,
    title: "Home",
    path: "./",
    cName: "nav-item"
  },
  {
    id: 2,
    title: "Services",
    path: "./services",
    cName: "nav-item"
  },
  {
    id: 3,
    title: "Products",
    path: "./products",
    cName: "nav-item"
  },
  {
    id: 4,
    title: "Contact Us",
    path: "./contactus",
    cName: "nav-item"
  }
];

Sanbox link: https://codesandbox.io/s/competent-agnesi-ho4h8?file=/src/components/NavItems.js:0-375

Andrew F · Accepted Answer · 2021-12-29 14:13:18Z

1

Its not default import, so use curly bracers for import import {navItems} from "./NavItems";

answered Dec 29, 2021 at 14:13

Andrew F

5543 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amila Senadheera · Accepted Answer · 2021-12-29 14:18:21Z

0

There were two issues

You have not exported navItems as a default export. Need to change the import to following. In Navbar.js

import { navItems } from "./NavItems";

Need to wrap the App using BrowserRouter to get rid of the next error that comes in index.js.

import { BrowserRouter } from "react-router-dom";
...
...
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

Code Sandbox

answered Dec 29, 2021 at 14:18

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

1 Comment

Amila Senadheera Over a year ago

@na ha, check this out !!

Dharman · Accepted Answer · 2021-12-29 14:30:33Z

In your App you had two problems:

Let's start by seeing your import :

Before

import navItems from "./NavItems";

After

import {navItems} from "./NavItems";

You use the brackets because you didn't export as being default.

Next Problem is that after your issue here you get and error regarding the route, here is a possible fix for you :

Before

import "./styles.css";
import Navbar from "./components/Navbar";

export default function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

After

import "./styles.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
      </Router>
    </div>
  );
}

You have to do this changes in your App.js.

Collectives™ on Stack Overflow

Cannot display unordered list using map

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related