How to display nested comments in React?

Question

JavaScript

The task is to display comments on the page. The following JSON comes from the server:

"comments": [
    {
        "id": 92241,
        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
        "level": 0,
        "allow_reply": true,
        "replies": []
    },
    {
        "id": 92241,
        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
        "level": 0,
        "allow_reply": true,
        "replies": [
            {
                "id": 92241,
                "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                "level": 0,
                "allow_reply": true,
                "replies": []
            },
            {
                "id": 92241,
                "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                "level": 0,
                "allow_reply": true,
                "replies": [
                    {
                        "id": 92241,
                        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                        "level": 0,
                        "allow_reply": true,
                        "replies": []
                    }
                ]
            }
        ]
    }
]

I understand that you need to run recursion in the component, but I don’t fully understand how to write a condition so as not to go into an infinite loop.
Now I do this
in the parent:

{this.props.comments.map((item, id) => {
                    return (
                        <div className="talk-branch">
                            <Comment {...item} />
                        </div>
                    )
                })}

In the component:

var Comment = class Comment extends React.Component {

    render() {
        const { fullname, date, text, replies } = this.props;
        return (<div className="talk-branch__item">
            <div className="talk-branch-main">
                <div className="talk-branch__avatar">
                    <img src="https://www.fursk.ru/static/img/talk/woman_avatar.png" alt="avatar"/>
                </div>
                <div className="talk-branch__body">
                    <div className="talk-branch__body-author" itemType="http://schema.org/Person" itemProp="author">
                        <span className="talk-branch__body-name" itemProp="name">{fullname}</span>
                    </div>
                    <div className="talk-branch__date">
                        <time itemProp="datePublished" datetime={date}>
                            {date}
                        </time>
                    </div>
                    <div className="talk-branch__text" itemProp="reviewBody">
                        {text}
                    </div>
                    <div className="talk-branch__reply">
                        <div onClick={this.toggleForm}>Ответить</div>
                    </div>
                </div>
            </div>
           {replies && replies.length !== 0 ?
                replies.map((item, id) => {
                    return <Comment {...item} />
                })
            :
            false}
        </div>)
    }
}
export default Comment;

Answer 1

You don't pass a comment in a component when you call yourself. It would also be nice to make sure that Comment is called only if there are comments. And in a comment, you call Comment once, not a list of comments.
I would do so. I created the CommentList component, in it I made a call to the current Comment comments in a loop. And in the Comment component, I checked for the presence of comments, if there are any, I would call CommentList (passing it a list of comments), which in due time will again cycle through the comments and call the Comment component, etc.