Any example of adding Side Menu using recursion.

[duttarnab]

I have parent-child menus for example:

{
            icon: 'fa-gears', label: 'Services', children: [
                { label: 'Acrs', component: AcrsPage, path: '/config/acrs' },
                { label: 'Cache', component: CachePage, path: '/config/cache' },
                { label: 'Jwks', component: JwksPage, path: '/config/jwks' },
                {
                    icon: 'fa-database', label: 'Persistence', children: [
                        { label: 'Ldap Edit', component: LdapEditPage, path: '/config/ldap/edit:configId' },
                        { label: 'Ldap Add', component: LdapAddPage, path: '/config/ldap/new' },
                        { label: 'Ldap', component: LdapListPage, path: '/config/ldap' },
                        { label: 'Couchbase', component: CouchbasePage, path: '/config/couchbase' }
                    ]
                }
            ]
        }

Is there any example where we can arrange the menus using recursion? I tried with the below component, although it arranges menu but shows every item as parent menu (even if there is no child item to it.)

import React from 'react'
import { SidebarMenu, Divider } from '../'

export const SidebarMenusRecursiveWrapper = ({ item }) => {

    const { label, path, children = [], icon = '' } = item;

    function getIcon(name) {
        let fullName = ''
        if (name) {
            fullName = 'fa fa-fw ' + name
            return <i className={fullName}></i>
        }
        return ''
    }
    return (
        !!label &&
        <SidebarMenu>
            {children.length > 0 ? (
                <SidebarMenu.Item
                    icon={getIcon(icon)}
                    title={label}>
                    {children.map((child, i) => {
                        return (
                            <SidebarMenusRecursiveWrapper key={i} item={child} />
                        );
                    })}
                </SidebarMenu.Item>
            ) : (
                    <SidebarMenu.Item
                        icon={getIcon(icon)}
                        title={label}
                        to={path}
                    />
                )
            }
        </SidebarMenu>
    );
};