Как построить вложенное меню?

Question

[historydev]

Я переписываю проект на реакте, если пробую через createElem/appendChild, получаю ошибку. Мне нужно вернуть меню в таком формате:

<nav>
  <ul>
   <li>
     <ul>
       <li><Link to='/'>Children item</Link></li>
     </ul>
     <Link to='/'>Item</Link>
  </li>
  </ul>
</nav>

Сейчас я сортирую меню по порядку и вывожу в консоль заголовки пунктов, как мне это реализовать?

export default function TopBar() {
    return (
        <Router>

            { createNavigation(navigationItems) }

        </Router>
    )
}

const navigationItems = [
    {
        id: 3,
        title: 'Пункт 3',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 2,
        title: 'Пункт 2',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 1,
        title: 'Пункт 1',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            }
        ]
    },
    {
        id: 4,
        title: 'Пункт 4',
        children: [
            {
                id: 1,
                title: 'Пункт 1'
            },
            {
                id: 3,
                title: 'Пункт 3'
            },
            {
                id: 2,
                title: 'Пункт 2'
            }
        ]
    }
];

function sortItemsInOrder(items) {

    if(Array.isArray(items)) {

        items = items.sort(inOrder);

        function inOrder(item1, item2) {
            return item1.id - item2.id
        }

        return items

    }

    return [{id: 0, title: 'No items', children: [{id: 0, title: 'No children items'}]}]

}

function createNavigation(items) {

    sortItemsInOrder(items).forEach((item, i, arr) => {

        console.log(item.title);

        sortItemsInOrder(item.children).forEach((item, i, arr) => {
            console.log(item.title)
        })

    });

}

Answer 1

[0xD34F]

const Menu = ({ items }) =>
  items instanceof Array && items.length
    ? <ul>
        {items.map(n => (
          <li key={n.id}>
            <a>{n.title}</a>
            <Menu items={n.children} />
          </li>
        ))}
      </ul>
    : null;

Comments

[historydev]

Извините за поздний ответ, не сработало, я решил попробовать ещё, вот что у меня сейчас:

function createNavigation(items) {

    let nav;

    sortItemsInOrder(items).forEach((item, i, arr) => {

        nav = (

            <nav>
                <ul>

                    <li>
                        <ul>
                            { sortItemsInOrder(item.children).forEach((item, i, arr) => {
                                return (
                                    <li> { item.title }</li>
                                )
                            }) }
                        </ul>
                        <Link to="/">{ item.title }</Link>
                    </li>

                </ul>
            </nav>
        );

        return nav

    });

    return nav

}

[0xD34F]

Владимир,

не сработало

.forEach((item, i, arr) => {
  return

Убил бы.

[historydev]

0xD34F, я готов сам убиться об вас, покажите как нужно, мне надоело говнокодить

[0xD34F]

Владимир, вот у этих ребят тот же пробел в знаниях был, что есть у вас сейчас: 1, 2, 3.

[historydev]

0xD34F, что мне нужно знать чтобы грамотно реализовать текущую задачу?

[historydev]

0xD34F, из приведённых примеров я узнал что forEach не возвращает массив и не имеет собственного результата, мне нужно юзать map/reduce?

[historydev]

0xD34F, вот это частично сработало, буду пробовать дальше:

function createNavigation(items) {

    return sortItemsInOrder(items).map(item => {
        return (
            <nav>
                <ul>
                    <li>{ item.title }</li>
                </ul>
            </nav>
        )
    })
}

[historydev]

0xD34F, это работает почти идеально, но если children пуст, у меня пустой ul, как от этого избавиться?

function createNavigation(items) {

    return (
        <nav>
            <ul>
                {
                    sortItemsInOrder(items).map(item => {
                        return (

                            <li>

                                <ul>
                                    {
                                        sortItemsInOrder(item.children).map(item => {
                                            return (
                                                <li><Link to='/'>{ item.title }</Link></li>
                                            )
                                        })
                                    }
                                </ul>

                                <Link to='/'>{ item.title }</Link>

                            </li>

                        )
                    })

                }
            </ul>
        </nav>
    )
}

[0xD34F]

Владимир, вы код из ответа вообще не пытались читать, да?

[historydev]

0xD34F,

const Menu = ({ items }) =>
  items instanceof Array && items.length // Если items == Array и items.length то
    ? <ul> // Создаём список
        {items.map(n => (
          <li key={n.id}> // Создаём li с key n.id (не ясно зачем, первый раз такое вижу)
            <a>{n.title}</a> // Создаём ссылку с текстом n.title
            <Menu items={n.children} /> // Создаём какой-то непонятный компонент Menu с атрибутом items равному n.children
          </li>
        ))}
      </ul>
    : null;

[0xD34F]

Владимир,

первый раз такое вижу

https://ru.reactjs.org/docs/lists-and-keys.html

непонятный компонент Menu

А тем временем, всего шестью строчками выше: const Menu = ....

[historydev]

0xD34F, аааа, вот я слепой, спасибо! Собрал всё, подрубил функцию сорта и всё идеально. Спасибо ещё раз!