title: How to dynamically update object key in React state
body: <p>I'm creating a React project that stores data in Firebase, it pulls data from Firebase on every refresh.</p>
  <p>I'm trying to make it so that when I add a new comment, React State dynamically updates the object key in State. If you see the screenshot below, see the <code>comments_text</code> object, I want to make the key <code>comment</code> be simply <code>2</code> instead of <code>comment</code>.</p>
  <p><a href="https://i.stack.imgur.com/kNW1P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kNW1P.png" alt="enter image description here" /></a></p>
  <p>When I refresh the page, Firebase (I think it's Firebase) dynamically updates the keys (0, 1, 2, 3 etc...). But I'm currently hard coding the object key to be <code>comment</code> when updating the React state. Please see React/Redux code below...</p>
  <pre><code>    case HOLD_COMMENT_POST:
          {
            const { postUserId, postId, commenter_comment, commenter_handle, commenter_uid, comment_key } = action.payload;
  
            return state.map((user) =&gt; {
              if (user.uid === postUserId) {
  
                return {
                  ...user,
                  posts: user.posts.map(post =&gt; {
                    if (post.key === postId) {
  
                      return {
                        ...post,
                        comments_text: post.comments_text ? {...post.comments_text, comment: {commenter_comment: commenter_comment, commenter_handle: commenter_handle, commenter_uid: commenter_uid, key: comment_key}} : {comment: {comment: commenter_comment, handle: commenter_handle, uid: commenter_uid, key: comment_key}}
                      };
                    } else {
                      return post;
                    }
                  })
                }
              }
              else {
                return user;
              }
            })
          }
  </code></pre>
  <p>Is there a way to dynamically update the key? I realize it's currently hard coded to display <code>comment</code>, but I would prefer it updates to the next sequential number (2, 3, 4 etc...)</p>
  <p>Lastly, my code is currently working, no bugs (that I know of). I'm just concerned that hard coding the key will cause issues later on. Is it actually okay to leave it as is if there is no issue? Whenever I refresh the page, the keys are automatically dynamically updated to be sequential numbers. For consistency, I would just prefer the key dynamically updates on React state updates.</p>
  <p>Please let me know if you need more details. Thank you for reviewing.</p>