Рекурсивный вывод иерархии элементов в виде вложенного списка

Условие

Дан массив объектов, каждый из которых содержит идентификатор, название и ссылку на родительский элемент, образуя древовидную структуру. Требуется построить визуальное представление этой структуры в виде вложенного списка <ul>/<li>, где вложенность отражает уровни иерархии.

const First = () => {
  const ListData = [
    { id: 1, name: 'Element 1', parentId: null },
    { id: 2, name: 'Element 2', parentId: 1 },
    { id: 3, name: 'Element 3', parentId: 2 },
    { id: 4, name: 'Element 4', parentId: 3 },
    { id: 5, name: 'Element 5', parentId: 2 },
  ];

  return (
    <ul>
      <li>Element 1</li>
    </ul>
  );
};

Ответ

Сгруппируйте элементы по parentId и рекурсивно отобразите детей каждого узла. Это избавит от полного фильтрования массива на каждом уровне.

function TreeList({ data }) {
  const children = new Map();
  for (const item of data) {
    if (!children.has(item.parentId)) children.set(item.parentId, []);
    children.get(item.parentId).push(item);
  }
  function render(parentId) {
    const items = children.get(parentId);
    if (!items?.length) return null;
    return <ul>{items.map(item => <li key={item.id}>
      {item.name}{render(item.id)}
    </li>)}</ul>;
  }
  return render(null);
}
// В First: return <TreeList data={ListData} />;

Предполагаются уникальные ID и корректное ациклическое дерево из условия. Недоверенный набор сначала проверяют на циклы, отсутствующих родителей и допустимую глубину.