Count number of Children in recursive react component-CodePudding

I'm working on a comment system and used a recursive approach to show parent and child comments. When I delete a child, I want to update the count of child comments for its parent.

//json data data = [{ name: 'Parent1', childComments: [{ name: 'Child1', text:'child comment1' }, { name: 'Child2', text:'child comment2' }] },{ name: 'Parent2', childComments: [{ name: 'Child1', text:'child comment1' }, { name: 'Child2', text:'child comment2' }] }]

const Comment = ({ item }) => {
  const childComment = item

 //delete child element and update the parent count 
  const deleteChildComment =(item) => {
    
  }

  return childComment && (
    <>
      {name}
      Children count : {childComments.length}
                 <Button
                  className={styles.replies}
                  onClick={() => {
                    setNewCommentAdded(false)
                    deleteChildComment(childComment)
                  }}
                > Delete This comment </Button>
      {childComments && items.map((item) => (
        <Comment item={item} />
      ))}
    </>
  )
}

CodePudding user response：

Counting the children would be a bad idea and make things way too complicated. Just use the data you use to generate the comment component.

As a rule, always make a UI represent data. Don't try to derive data from your UI layout.

e.g

commentList.map((comment) => (<Comment childCount={comment.children.length}));