React and map function

Question

so I have 2 components
navbar component
and nav-links component
I'm trying to pass the nav links name as a prop from the navbar component to the navlinks component
and I don't understand why I keep getting and error once I try to use the map function over the array of objects i get inside the nav links component

so my question is what is the reason? what am I missing?

i keep getting this error:

TypeError: Cannot read properties of undefined (reading 'map')

NavBar component

import React from "react";
import "./navbar.styles.scss";
import Logo from "../../logo.png";
import NavActionButton from "../navbar/navbar-action-buttons/nav-icons.component";
import NavLinks from "../navbar/nav-item/nav-links.component";

const Navbar = () => {
  const menusItems = [
    {
      id: 775464,
      title: "ראשי",
    },

    {
      id: 77542,
      title: "אודות",
    },

    {
      id: 7751464,
      title: "החנות התבלינים  ",
    },

    {
      id: 77364,
      title: "קטגוריות",
    },

    {
      id: 7777364,

      title: "צור קשר",
    },
  ];

  return (
    <div className="navbar_container">
      <div className="navbar_items">
        <NavActionButton></NavActionButton>
        <NavLinks menusItems={menusItems}></NavLinks>
        <div className="logo_container">
          <img className="logo" src={Logo} alt="" />
        </div>
      </div>
    </div>
  );
};

export default Navbar;

NavLinks component

import React from "react";
import "./nav-links.styles.scss";

const NavLinkes = (props) => {
  const { direction, display, menusItems } = props;

  const styles = {
    display: display,
    flexDirection: direction,
  };

  return (
    <div className="navbar_links">
      <ul style={styles}>
        {menusItems.map(({ title, id }) => {
          console.log(title);
          return (
            <li key={id} className="link_item">
              <a className="link" href="">
                {title}
              </a>
            </li>
          );
        })}
      </ul>
    </div>  
  );
};

export default NavLinkes;

I tried console log inside the nav links component and I can see the props I have passed from the navbar to the nav links component are shown as expected
and when I map over it I can see the data inside the console log
in the map function but it looks like the map function is not rendering it

also when put the menuItems array directly inside the navlinks component it works (just as a const not a prop)

Can you provide a [mre] that we can directly run to see the issue? — Unmitigated, Mar 17 '23 at 22:07
Nothing’s wrong with your JavaScript code. Looks like it’s a css question. Can you try to add `width: 100` to your style? — devpolo, Mar 17 '23 at 22:08
Thanks for the response, nope its not a css issue. it works perfect when I'm doing it without the map so is suspect it has to do somthing with it — W3bNinja, Mar 17 '23 at 22:13
Could you check with devtools if the elements are being added to the DOM? — Victor Santizo, Mar 17 '23 at 22:20
well the page is not being rendered because of the error so cant really see the elements — W3bNinja, Mar 17 '23 at 22:45
Your error means `menusItems` is `undefined`. In your actual code, how is `menusItems` being defined? Is it actually hardcoded like it in in this example? — Nick Parsons, Mar 17 '23 at 23:14

score 0 · Answer 1 · answered Mar 17 '23 at 23:11

you can instead try this for the Navbar component (plus with all the other things u had, i just made simpler as an example and it works just fine):

import React from 'react'
import NavLinkes from './NavLinkes';

export const Navbar = () => {
  const menusItems = [
    {
      id: 775464,
      title: "ראשי",
    },

    {
      id: 77542,
      title: "אודות",
    },

    {
      id: 7751464,
      title: "החנות התבלינים  ",
    },

    {
      id: 77364,
      title: "קטגוריות",
    },

    {
      id: 7777364,

      title: "צור קשר",
    },
  ];


  return (
    <div>
      <div className="navbar_container">
        <NavLinkes menusItems={menusItems} />
    </div>
    </div>
  )
}

export default Navbar;

And this for your links

import React from "react";

const NavLinkes = ({menusItems}) => {


  return (
    <div className="navbar_links">
      <ul>
        {menusItems.map(({ title, id }) => {
          console.log(title);
          return (
            <li key={id} className="link_item">
              <a className="link" href="">
                {title}
              </a>
            </li>
          )
        })}
      </ul>
    </div>  
  );
};

export default NavLinkes;

thank you for the response. for me its is the same error. Strange — W3bNinja, Mar 18 '23 at 08:17
1) - Why don't you try to just deconstruct your props instead of declaring them as a const? 2) - if you try the exact same example as i did, you still get an error? 3) - As mentioned by someone your getting undefined meaning you're not passing anything... — Alkis Green, Mar 18 '23 at 08:44
I have found the problem. used the navlinks component also in my footer component without passing also the same props so the menuItems was undefined once the footer component renders so it caused the issue. that's why it worked for you and not for me the footer component was the problem — W3bNinja, Mar 18 '23 at 09:06

score -1 · Answer 2 · answered Mar 17 '23 at 22:23

-1

try doing it this way

return (
    <div className="navbar_links">
      <ul style={styles}>
        {menusItems.map((item) => {
          console.log(item.title);
            <li key={item.id} className="link_item">
              <a className="link" href="">
                {item.title}
              </a>
            </li>
        )}
      </ul>
    </div>  
  );

answered Mar 17 '23 at 22:23

michael25

24
4

2

This is exactly the same thing he is doing.. without destructuring – devpolo Mar 17 '23 at 22:38

React and map function

2 Answers2