interview_task

gistfile1.jsx

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 Comments = (props) => {
  return (
    <div>
      {props.comments.map((comment) => (
        <Comment key={comment.id} comment={comment} />
      ))}
    </div>
  );
};

const Comment = (props) => {
  return (
    <div style={{ marginLeft: '10px' }}>
      <p>{props.comment.text}</p>
      {props.comment.children && <Comments comments={props.comment.children} />}
    </div>
  );
};

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

export default App;