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.
Advertisement
Answer
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] } }) });