rendering an array in react component wont work

Question

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 ">
              {item.description}
            </h3>
            <div className="border 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.

Show your entire component please. I'm not sure but did you wrap your {navigation.map()} with React fragment or something ? (<>{navigation.map()}</>) — Nicolas Menettrier
– Nicolas Menettrier, Commented Jul 19, 2022 at 8:43
subMenu is an array of objects, you are going to need to map that onto some components/markup as well. — DBS
– DBS, Commented Jul 19, 2022 at 8:46

pks9906 · Accepted Answer · 2022-07-19 08:46:28Z

1

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

answered Jul 19, 2022 at 8:46

pks9906

3011 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

rendering an array in react component wont work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related