Seconds of moment object are changing on every render and have values that can't exist

Viewed 50

I render a date with moment but for some reason, the seconds of some objects are changing after every rerender. The strange part is that I'm not sure how can the seconds be more than 60.

{moment(comment?.created_at).format('DD/MM/YYYY hh:ss')}

I also sort them, not sure if that's related:

{comment?.replies?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(reply => 

enter image description here

EDIT: So I render comments and replies which look something like this:

{
  "post_content": "Content of post",
  "comments": [
      {
      "comment_content": "First Comment",
      "comment_replies": [{ 
         "reply_content": "First reply"
               }]
      }]
}

I'm sorting the comments and replies and then rendering them:

   <List>
            {data?.comments?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(comment => {
                return (<div> 
                    <Comment comment={comment} data={data} setData={setData}/> 
                        <div>
                        {comment?.replies?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(reply => {
                            return (
                                <Box component="div" m={3}>
                                    <Reply commentId={comment.comment_id} data={data} setData={setData} reply={reply}/>
                                </Box>
                            )
                        })}
                        </div>
                    </div>);
            })}
        </List>

EDIT 2: The comment object after the date is rendered.

{
"created_at": "2021-04-03T18:45:57.987068Z",
"comment_id": "7fabbade-23e0-47ab-9e46-af37d07a46b1",
"content": "Second Comment",
"user": "usernametest",
"replies": [
    {
        "reply_id": "b3f96c47-bd46-481b-b485-ea0b19977031",
        "content": "First Reply",
        "user": "usernametest"
    }
]

}

EDIT 3: The showReply is a flag to show the reply input, and patch is a flag to show the update/edit button.

<Typography
                      component="span"
                      variant="body2"
                      className={classes.inline}
                      color="textPrimary"
                    >
                      {comment?.user} 
                    </Typography>
                    - {moment(comment?.created_at).format('DD/MM/YYYY hh:mm')}
                    {console.log(comment)}
                    <div>
                    {localStorage.getItem("vettageToken") && localStorage.getItem("vettageToken") !== "undefined" &&
                      localStorage.getItem("vettageToken") !== null ? 
                    <div>
                      <a onClick={e => setShowReply(!showReply)}>Reply</a>
                      {patch ? <a onClick={patchComment}>Update</a> : <a onClick={e => setPatch(!patch)}>Edit</a> }
                      <a onClick={e => deleteComment()}>Delete</a>
                      {showReply && 
                        <div>
                          <TextField
                            id="outlined-multiline-static"
                            label="Add a comment"
                            multiline
                            rows={4}
                            value={reply}
                            onChange={e => setReply(e.target.value)}
                            defaultValue="Default Value"
                            variant="outlined"
                          />
                          <Button onClick={e => postReply()}>Reply</Button>
                        </div>
                      }
                    </div> 
0 Answers
Related