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.

This question is probably better suited to [codereview.stackexchange.com](https://codereview.stackexchange.com/), since there isn't an actual question here. — Alicia Sykes, May 12 '22 at 19:08

trincot · Accepted Answer · 2022-05-12T19:31:36.257

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

score 1 · Answer 2 · answered May 12 '22 at 19:40

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

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

2 Answers2