Reddit Client project - Array.map returns last value of undefined

Hello!

I am attempting to use the date-fns library in my app to convert the UTC timestamp received by the API to a relative time in human readible format.

I use Array.map to iterate through the returned comments and populate a comment detail component like so:

const commentsList = comments.map((comment) => (
    <PostCommentDetail
      key={comment.id}
      created={comment.created_utc}
      author={comment.author}
      body={comment.body}
    />
  ));

The PostCommentDetail component uses the created prop as below:

import React from "react";
import { fromUnixTime, formatRelative } from "date-fns";

export const PostCommentDetail = ({ author, created, body }) => {
  const timeDate = fromUnixTime(created).toLocaleString();
  //console.log(timeDate);

  return (
    <div className="post__comment">
      <div className="post__comment-meta">
        <p className="post__comment-auth">{author}</p>
        <p className="post__comment-created">{timeDate} ago</p>
      </div>
      <p className="post__comment-text">{body}</p>
    </div>
  );
};

So far no error, the application shows the converted UTC time.

When I try and use the formatRelative function, however, to convert to relative time, I get the following error: RangeError: Invalid time value

If I console.log(timeDate) I get the timestamp for all the comments as expected, but the last value is always Invalid Date.

Can anyone explain why this is and how to fix it, please?

Thank you very much in advance.

Hi,
did you check if you receive a valid object with all relevant attributes like created_utc as last comment?

Hi Mirja_t,

I console logged both the comments and commentList variables from the first codeblock above and, assuming I am checking this correctly, I think so, yes:

(This was working fine when I was using a manually created local function to convert the UTC time; it is only since I have changed to use the library that I get the problem).

Thank you!

Ok, then I probably can’t help you because I don’t know that library. I assumed that the cause might rather be in the date you get from Reddit. I experienced weird behaviour for example when a comment was deleted (but still in the list).
I would still try to just log the created_utc of each comment. Maybe that changed since you last checked with it your own function.

It’s definitely the map - console.log of the created_utc from API - last row = undefined.

A console.log of the author & created_utc also returns the last row of undefined.

Can I just say, I was looking at the posted solutions to the project yesterday and thought yours was great.

Thank you for trying anyway.

1 Like

But that seems to indicate that what you get from reddit isn’t valid and the library isn’t to blame as it doesn’t receive a date it can process in the first place…

Thank you! :slight_smile:

Hi Mirja_t,

Just a note to confirm you were correct. The last object in the array returned by the API was some kind of summary object; I used Array.pop() to get rid of it before assigning the returned array to the state and it solved the problem.

Thank you very much again for taking the time!

1 Like

You’re welcome. Thanks for the note :slight_smile: