How to render nested map from JSON in React.JS?

Question

I'm trying to render menu values from a JSON. Considering that this is a multilevel menu, I'm trying to do a nested map to render the full menu.

const menu = {
  data:[
  {
    title: "Home",
    child: [
      {
        title: "SubLevel1",
        child: {
          title: "SubSubLevel1"
        }
      },
      {
        title: "SubLevel2",
        child: [
          {title: "SubSubLevel1"},
          {title: "SubSubLevel2"}
        ]
      }
    ]
  },
  {
    title: "About",
  },
  {
    title: "Contact",
  }
]}

And here is the part when I use the map function :

const MenuNavigation = () => {
    return (
        {menu.data.map((item) => ( 
            <div>
                <ul>{item.title}</ul> 
                {item.map((sub, id) =>
                    <li>{sub.child[id].title}</li>
                )} 
            </div>
        ))}
    )
};

I managed to render main level for the menu (Home, About, Contact), but how can I print sublevel & subsublevel values?

Another question: Is there a way to map recursively a tree structure?

Yes, you can render the menu recursively. But your menu does not have a consistent structure? If the subChild is replaced with child and text is replaced with title and project is replaced with title, then It is possible to do so. can you update the question like that then It is possible to give an answer only if possible. — Amila Senadheera
– Amila Senadheera, Commented Apr 28, 2021 at 12:48
@AmilaSenadheera I did as you asked, but don't you think it will create variables conflicts? Thanks for the help. — ParkerIndustries
– ParkerIndustries, Commented Apr 28, 2021 at 12:59

Amila Senadheera · Accepted Answer · 2021-04-28 13:33:47Z

Try below:

The menu should be like this. Your menu had one issue in child of "SubLevel1" not defined inside an array.

  const menu = {
    data: [
      {
        title: "Home",
        child: [
          {
            title: "SubLevel1",
            child: [{
              title: "SubSubLevel1",
            }],
          },
          {
            title: "SubLevel2",
            child: [{ title: "SubSubLevel1" }, { title: "SubSubLevel2" }],
          },
        ],
      },
      {
        title: "About",
      },
      {
        title: "Contact",
      },
    ],
  };

Render it recursively like below. I have added a margin-left to see the levels properly.

  const renderMenu = (menu) => {
    return menu.map((item) => (
        <div style={{ marginLeft: '25px' }}>
            {item.title}
            {item.child && renderMenu(item.child)}
        </div>
    ))
  }

  return <div>{renderMenu(menu.data)}</div>;

Collectives™ on Stack Overflow

How to render nested map from JSON in React.JS?

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