rendering an array in react component wont work-CodePudding

Im trying to render the following information into a component:

 const navigation = [
  {
    name: "Services",
    description: "Our services",
    href: "#",
    subMenu: [
      { name: "Management" },
      { name: "Development" },
      { name: "Specialists" },
    ],
  },
  {
    name: "Experts",
    description: "our experts",
    href: "#",
    subMenu: [
      { name: "Engineers" },
      { name: "Project managers" },
      { name: "Developers" },
      { name: "Cloud solutions" },
    ],
  },

So I tried some different approaches but they won't work

first approach:

{navigation.map((item) => (
        <>
          <div className=" border-b-2 justify-between pb-4 flex ">
            <h3 className="underline-offset-2 text-IndproGreenLight">
              {item.description}
            </h3>
            <div className="border-IndproGreenLight border-solid border-b-2"></div>
            <ChevronDownIcon
              onClick={() => setShowSubMenu(!ShowSubMenu)}
              className="h-5 w-5 "
            />
          </div>

          <div>{item.subMenu}</div>
        </>
      ))}

Gives error: "Objects are not valid as a React child", but all guides I find says that this should be solved by using .map() which I am but it still gives this error. So I tried using .map() again in the component:

{navigation.map((menu) => (
                <div key={menu.name}>{menu.subMenu}</div>
              ))}

But now it gives this error: "error: objects are not valid as a react child ".

Thanks for your help.

CodePudding user response：

You should map through the subMenu because it on it's own is an array. Something along the lines of:

navigation.map((menu) => (
  menu.subMenu.map(sm => {
     // do as you need here
  })
)