Есть компонент с иерархическим списком данных в виде дерева. Нужно отрендерить это дерево: родители и дети с отступом правее. Реализуй рендеринг без функций скрытия/раскрытия.

Дерево удобно отрисовать рекурсивно: каждый узел выводит подпись и вложенный список детей, который создаёт отступ.

Для данных вида { id, label, children } пример на React:

function Tree({ nodes }) {
  return <ul style={{ paddingInlineStart: 20 }}>
    {nodes.map(node => <li key={node.id}>
      <span>{node.label}</span>
      {node.children?.length > 0 && <Tree nodes={node.children} />}
    </li>)}
  </ul>;
}

Предполагаются уникальные id среди соседей и отсутствие циклов. Сложность обхода O(n), глубина рекурсии соответствует глубине дерева. Это обычный вложенный список без интерактивного раскрытия.