Show nested array items react native

Question

I have array of comments and their replies like this:

[
    {
        commentId: "5efd85d5b2eff7063b8ec802",
        description: "some comment description",
        isAnonymous: false,
        createdAt: "2020-07-02T06:59:33.317Z",
        currentUserLiked: 0,
        likes: 0,
        user: {
            firstName: "ar",
            lastName: "ar",
            email: "test@email.com",
            username: "sami",
            isVerified: false,
        },
        children: [
            {
                commentId: "5efd86b7b2eff7063b8ec803",
                parentId: "5efd85d5b2eff7063b8ec802",
                description: "some comment description",
                isAnonymous: false,
                createdAt: "2020-07-02T07:03:19.405Z",
                currentUserLiked: 0,
                likes: 0,
                user: {
                    firstName: "ar",
                    lastName: "ar",
                    email: "test@email.com",
                    username: "sami",
                    isVerified: false,
                },
                children: [
                    {
                        commentId: "5efd89c4b2eff7063b8ec805",
                        parentId: "5efd86b7b2eff7063b8ec803",
                        description: "Child of Child",
                        isAnonymous: false,
                        createdAt: "2020-07-02T07:16:20.717Z",
                        currentUserLiked: 0,
                        likes: 0,
                        user: {
                            firstName: "ar",
                            lastName: "ar",
                            email: "test@email.com",
                            username: "sami",
                            isVerified: false,
                        },
                        children: [],
                    },
                ],
            },
            {
                commentId: "5efd8996b2eff7063b8ec804",
                parentId: "5efd85d5b2eff7063b8ec802",
                description: "Child of Child",
                isAnonymous: false,
                createdAt: "2020-07-02T07:15:34.341Z",
                currentUserLiked: 0,
                likes: 0,
                user: {
                    firstName: "ar",
                    lastName: "ar",
                    email: "test@email.com",
                    username: "sami",
                    isVerified: false,
                },
                children: [],
            },
        ],
    },
];

and I want to show them as all children in same level in react native using flatList.

How can I do this?

Answer 1

Do I understand correctly?:

const comments = [{id: 1, children: [{id: 2, children: [{id: 3, children:[]}]}]}];

const flatComments = (list) => {
    return list.flatMap(el => {
        const {children, ...out} = el;
        return [out, ...flatComments(children)];
    });
};

flatComments(comments);

// [{id: 1}, {id: 2}, {id: 3}];