Как вывести комментарии с бесконечной вложенностью на React?

Question

[Yzurgzd]

Вложенность:

"reviews": [
        {
            "id": 1,
            "children": [
                {
                    "id": 2,
                    "children": [
                        {
                            "id": 3,
                            "children": [
                                {
                                    "id": 4,
                                    "children": [],
                                    "user": {
                                        "id": 1,
                                        "username": "Admin",
                                        "avatar": "http://127.0.0.1:8000/media/developers/default.jpg"
                                    },
                                    "text": "Ch - 3",
                                    "uploaded_time": "2020-07-30T12:24:52.414582+03:00",
                                    "parent": 3
                                }
                            ],
                            "user": {
                                "id": 1,
                                "username": "Admin",
                                "avatar": "http://127.0.0.1:8000/media/developers/default.jpg"
                            },
                            "text": "Ch - 2",
                            "uploaded_time": "2020-07-28T18:20:39.887167+03:00",
                            "parent": 2
                        }
                    ],
                    "user": {
                        "id": 1,
                        "username": "Admin",
                        "avatar": "http://127.0.0.1:8000/media/developers/default.jpg"
                    },
                    "text": "Ch - 1",
                    "uploaded_time": "2020-07-28T18:20:21.004694+03:00",
                    "parent": 1
                }
            ],
            "user": {
                "id": 1,
                "username": "Admin",
                "avatar": "http://127.0.0.1:8000/media/developers/default.jpg"
            },
            "text": "Text",
            "uploaded_time": "2020-07-28T18:19:22.644345+03:00",
            "parent": null
        }
    ],

Вывожу:

{reviews.map((review) => (
    ...
    {review.children.map((child) => (
        ...
    ))}
))}

В компоненте:

<ul className="list-unstyled mt-5">
{review.children.map((child) => (
                                <li key={child.id} className="mb-5">
                                  <div className="border-left border-3 pl-4">
                                    <div className="media align-items-center mb-2">
                                      <div className="avatar avatar-circle mr-3">
                                        <Image
                                          className="avatar-img"
                                          src={child.user.avatar}
                                          alt="Image Description"
                                        />
                                      </div>
                                      <div className="media-body">
                                        <div className="d-flex justify-content-between align-items-center">
                                          <span className="h5 mb-0">
                                            {child.user.username}
                                          </span>
                                          <small className="text-muted">
                                            31 Мая, 2020
                                          </small>
                                        </div>
                                      </div>
                                    </div>

                                    <p>{child.text}</p>

                                    <Link
                                      to="####"
                                      className="font-weight-bold"
                                    >
                                      Ответить
                                    </Link>
                                  </div>
                                </li>
                              ))}
                            </ul>
                          </li>
                        ))}
                      </ul>

Answer 1

[0xD34F]

Рекурсивный компонент. Если есть children с ненулевой длиной - создаёт экземпляр самого себя:

{reviews.map(n => (
  ...
  {Array.isArray(n.children) && n.children.length ? <Reviews reviews={n.children} /> : null}
  ...
))}