How to recursively render React components based on a deeply nested array?

Question

with react js I'm trying to reach the continuing list as child in child child ... but here's the thing I'm stuck with, How can I list it? To give an example, I want the schema to be as follows

please keep in mind that I am new to react js when replying to or reading this thread. I may have a hard time Expressing Myself.

Menu 1 Menu Title
Menu 2 Menu Title
--Menu 2.1 Menu category-header
--Menu 2.2 Menu category-header
--Menu 2.3 Menu category-header
---Menu 2.3.1 Menu sub-category-header
---Menu 2.3.2 Menu sub-category-header
---Menu 2.3.3 Menu sub-category-header
----Menu 2.3.3.1 Menu sub-sub-category-header
----Menu 2.3.3.2 Menu sub-sub-category-header

const menuData = [
        {
            name: "Menu 1",
            url: "/"
        },
        {
            name: "Menu 2",
            children: [
                {
                    name: "Menu 2.1",
                    url: "/page/menu-2-1"
                },
                {
                    name: "Menu 2.2",
                    url: "/page/menu-4-2"
                },
                {
                    name: "Menu 2.3",
                    children: [
                        {
                            name: "Menu 2.3.1",
                            url: "/page/menu-2-3-1"
                        },
                        {
                            name: "Menu 2.3.2",
                            url: "/page/menu-2-3-2"
                        },
                        {
                            name: "Menu 2.3.3",
                            children: [
                                {
                                    name: "Menu 2.3.3.1",
                                    children: [
                                        {
                                            name: "Menu 2.3.3.1.1",
                                            url: "/page/menu-2-3-3-1-1"
                                        },
                                        {
                                            name: "Menu 2.3.3.1.2",
                                            url: "/page/menu-2-3-3-1-2"
                                        }
                                    ]
                                },
                                {
                                    name: "Menu 4.3.3.2",
                                    url: "/page/menu-4-3-3-2"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

const Menu = ({data}) => {
    const renderMenuItems = data => {
        return data.map(
            (item, index) =>
                (item?.children && item?.children.length) ?
                    (
                        console.log(item)
                    ) :
                    <li className="nav-item" key={index}>
                        <Link className="nav-link" to={item.url}>{item.name}</Link>
                    </li>

        )
    }
    return data && (
        <nav className="navbar navbar-expand-md navbar-main border-bottom">
            <div className="container">
                <div className="collapse navbar-collapse mobile-menu">
                    <ul className="nav navbar-nav">
                        {renderMenuItems(data)}
                    </ul>
                </div>
            </div>
        </nav>

    );
}
export default Menu;

<nav>
    <ul>
        <li>
            <a href="url">Menu 1</a>
        </li>
        <li>
            <a href="url" class="category-header">Woman</a>
            <div class="sub-nav">
                <div class="sub-nav-center">
                    <div class="sub-nav-outer">
                        <div class="normal-column">
                            <div class="category-box">
                                <a href="url" class="sub-category-header">Clothes</a>
                                <ul class="sub-item-list">
                                    <li>
                                        <a href="">T-shirt</a>
                                    </li>
                                    <li>
                                        <a href="">Shorts</a>
                                    </li>
                                    <li>
                                        <a href="">Shirt</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</nav>

Ramesh Reddy · Accepted Answer · 2021-12-27 19:19:38Z

6

You have to recursively render each element until an element no longer has children.

I created a simple example using your data. Here, List maps and renders ListItem for each element of the array and ListItem again renders List if the element has children.

You can do something similar using your components.

const { useState, useEffect } = React;

const menuData = [
  {
    name: 'Menu 1',
    url: '/',
  },
  {
    name: 'Menu 2',
    children: [
      {
        name: 'Menu 2.1',
        url: '/page/menu-2-1',
      },
      {
        name: 'Menu 2.2',
        url: '/page/menu-4-2',
      },
      {
        name: 'Menu 2.3',
        children: [
          {
            name: 'Menu 2.3.1',
            url: '/page/menu-2-3-1',
          },
          {
            name: 'Menu 2.3.2',
            url: '/page/menu-2-3-2',
          },
          {
            name: 'Menu 2.3.3',
            children: [
              {
                name: 'Menu 2.3.3.1',
                children: [
                  {
                    name: 'Menu 2.3.3.1.1',
                    url: '/page/menu-2-3-3-1-1',
                  },
                  {
                    name: 'Menu 2.3.3.1.2',
                    url: '/page/menu-2-3-3-1-2',
                  },
                ],
              },
              {
                name: 'Menu 4.3.3.2',
                url: '/page/menu-4-3-3-2',
              },
            ],
          },
        ],
      },
    ],
  },
];

function ListItem({ listItem }) {
  const { name, url, children } = listItem;
  return (
    <li>
      <p>
        {name} - {url}
      </p>
      {Array.isArray(children) && <List list={children} />}
    </li>
  );
}

function List({ list }) {
  return (
    <ul>
      {list.map((listItem) => (
        <ListItem key={listItem.name} listItem={listItem} />
      ))}
    </ul>
  );
}
function App() {
  return <List list={menuData} />;
}

ReactDOM.render(<App />, document.querySelector('#root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

edited Dec 27, 2021 at 19:19

answered Dec 27, 2021 at 18:57

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

4 Comments

Selaminko Elam Over a year ago

Thank you for your answer. i can get the same, but what i want should be exactly as i specified in html format

Ramesh Reddy Over a year ago

@SelaminkoElam I can't really help you with rendering the exact HTML that you want. I suggest you understand what I did and try to replicate it.

Ramesh Reddy Over a year ago

@SelaminkoElam If you tried something and it's not working, I can check that if you send a runnable link using CodeSandbox or something.

Selaminko Elam Over a year ago

I've added an image to the topic, if you have a chance to take a look it would be nice, otherwise I'll upload "CodeSandbox"

Collectives™ on Stack Overflow

How to recursively render React components based on a deeply nested array?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related