I have a piece of state which holds an array of comments.
Each comment has an array of replies.
How can I add a reply value to the replies array of a specific comment within the comments array?
Here is my current attempt:
if (data) {
const isLargeNumber = (comment) => comment.id === reply.commentId;
const idx = comments.findIndex(isLargeNumber);
setPost({
...post,
comments: {
...comments[idx],
replies: [data.replyToComment, ...post.comments[idx].replies]
}
})
resetValues();
}
idx holds the correct value I need but I do not think my implementation is correct here.
As post.comments is an array, you certainly need to create an array, not a plain object with { }. You are missing one level in your nested structure (the array of comments, versus the specific comment). You can use Object.assign to replace the entry at [idx]:
const idx = post.comments.findIndex(isLargeNumber);
setPost({
...post,
comments: Object.assign([...post.comments], {
[idx]: {
...post.comments[idx],
replies: [data.replyToComment, ...post.comments[idx].replies]
}
})
});
Adapting from this example:
setPost({
...post,
comments: [
...post.comments.slice(0, idx),
{
...post.comments[idx],
replies: [...post.comments[idx].replies, data.replyToComment]
},
...post.comments.slice(idx + 1)
]
});