CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
sudhakar810
sudhakar810

Reputation: 93

Count number of Children in recursive react component

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} />
      ))}
    </>
  )
}

Upvotes: 0

Views: 346

Answers (1)

Bart
Bart

Reputation: 17361

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}));

Upvotes: 1

Related Questions