json - How to create a nested menu in JavaScript? -

so want achieve image below content sent server.

we can set menu items

const items = [   { key: 'editorials', active: true, name: 'editorials' },   { key: 'review', name: 'reviews' },   { key: 'events', name: 'upcoming events' }, ] //...     <menu vertical color='black' items={items}>      </menu> 

however, not see how nest them. setting item 'content' xml.

how create menu multiple nested sections in reactjs\semantic-ui in javacript?

i create following components:

1. <menucontainer /> -> our root component

2. <menu></menu> -> can render either (<menu />) or <item /> component

3. <item></item> -> can render <li /> or smth

and suppose have following json coming our server:

{   label: 'some menu',   children: [{ label: 'sub menu', children: [...] }, ...], } 

let assume when find array in our json, means have render menu. if have object, render simple child. rough algorithm be:

const menucontainer = ({items}) => ({    {items.map(item => item.items ? <menu items={items} /> : <item data={item} /> } }); 

is looking for?