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