Требуется создать React‑компонент Comments, который получает единственный проп — массив комментариев (comments). Каждый элемент массива представляет собой объект, обязательные свойства которого — id и text. Кроме того, объект может содержать опциональное свойство children — массив вложенных комментариев того же формата. Компонент обязан отрисовать список комментариев, выводя текст (text) каждого элемента. Если у комментария присутствует массив children, его элементы должны отображаться как вложенный список под соответствующим родительским пунктом. Вложенность комментариев может быть любой, без ограничения по уровням.

import React from "react";

let comments = [
  {
    id: 1,
    text: "message 1",
  },
  {
    id: 2,
    text: "message 2",
    children: [
      {
        id: 4,
        text: "message 4",
        children: [
          {
            id: 7,
            text: "message 7",
          },
          {
            id: 8,
            text: "message 8",
            children: [
              {
                id: 9,
                text: "message 9",
              },
              {
                id: 10,
                text: "message 10",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 5,
    text: "message 5",
  },
];

const App = () => {
  return (
    <div className="App">
      <Comments comments={comments} />
    </div>
  );
};

export default App;

Компонент должен рекурсивно обходить структуру данных и корректно отображать любые уровни вложенности, используя вложенные списки или любые другие подходящие элементы разметки.

React‑компонент для вывода комментариев с произвольной глубиной вложения