Как визуализировать элементы и их вложенный массив в React?

Question

Я немного новичок в React Js, я хотел бы отобразить меню из многомерного массива, я пробовал нижеприведенный код, который прекрасно работает в меню уровня 0, но не работает в подменю.

class MainMenu extends React.Component {
  constructor (props) {
        super(props)

        this.state = {
            mainmenu: [
                {
                    name: 'Men',
                    url: 'men.html',
                    childrens: [
                        {
                            childrenName: 'Men Cloths',
                            childrenUrl: 'men-cloths.html'        
                        }
                    ]
                },
                {            
                    name: 'Women',
                    url: 'women.html',
                    childrens: [
                        {                    
                            childrenName: 'Women Cloths',
                            childrenUrl: 'women-cloths.html'
                        }
                    ]
                }
            ]
        };
    }


    render () {
        return (
            <div>
                <ul>
                    {this.state.mainmenu.map((item, index) =>
                        <li key={index}>
                            <a href={item.url}>{item.name}</a>
                            <ul>
                                <li>
                                    <a href={item.childrenUrl}>{item.childrenName}</a>
                                </li>
                            </ul>
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

ReactDOM.render(
  <MainMenu />,
  document.getElementById('root')
)

Ниже снимок экрана с кодом выше:

Может кто-нибудь помочь исправить это. Спасибо

Answer 1

Вам нужно другое отображение в вашем основном отображении для рендеринга дочерних элементов.

render () {
        return (
            <div>
                <ul>
                    {this.state.mainmenu.map((item, index) =>
                        <li key={index}>
                            <a href={item.url}>{item.name}</a>
                            <ul>
                                {
                                  item.childrens.map(
                                    (childItem, index2) =>
                                      <li key={`${index}-${index2}`}>
                                          <a href={childItem.childrenUrl}> 
                                            {childItem.childrenName}
                                          </a>
                                      </li>                                        
                                  )
                                }                                    
                            </ul>
                        </li>
                    )}
                </ul>
            </div>
        )
    }