React and map function - Javascript

W3bNinja
March 17, 2023
174 views
0 votes
2 Answers

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)

Answers

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

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;

Please signup or login to give your own answer.

Click here to cancel reply.

React and map function – Javascript

Answers