Adding value to an array in useState but only at a particular index of the array

Question

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.

Answer 1

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