Efficient way to create a Date object in react js

Question

I have the following function which creates a component for me:

 renderComments(comments){
        const listcomments = comments.map((comment) => {
            return (
                <li key={comment.id}>
                    <div className="row">
                        {comment.comment}
                    </div>
                    <div className="row">
                        -- {comment.author} , {comment.date}
                    </div>
                </li>
            );
        });
        return(
            <ul className = "list-unstyled">
                {listcomments}
            </ul>
        );

    }

My problem is that the comment.date is in a weird format: "2014-09-05T17:57:28.556094Z"

I want to change the format but just typing Date.parse({comment.date}) doesn't work (it doesn't recognize Date.parse as a function). I found on the web and in SO how to create a Date object in react by declaring a new variable, but I can't really do that inside the return right?

I am new to react so would be great if someone can help me out converting the comment.date to a normal format in an efficient way plz.

I got to say that it's kind of scary to be asking questions... My question has just been posted and it already got a close vote. I really try to make my question as clear as I can and not to ask something that was asked before. Before I post a question I get a warning that I might get banned from asking questions.... — mashtock, Sep 17 '21 at 23:05
What is your desired date format? It sounds like you might be interested in [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). I don't think this question has anything to do with React. If it does, then perhaps you can clarify what is React-specific? — jsejcksn, Sep 17 '21 at 23:13
Your date is in [ISO_8601](https://en.wikipedia.org/wiki/ISO_8601) format which is a standard that the javascript Date object recognizes without parsing. So you can simply `new Date('2014-09-05T17:57:28.556094Z')` and then format as you will. — pilchard, Sep 17 '21 at 23:15
@jsejcksn The problem here is that I need to parse the date inside a return since I try to create a component. If it was a normal JS code not related to react I wouldn't have had that problem. So unless I'm missing out something, it is a react related question. — mashtock, Sep 17 '21 at 23:18
@pilchard I tried using new Date before posting the question but I didn't manage to make it work. I think it's because I'm inside a return. Might be that I messed something up though. — mashtock, Sep 17 '21 at 23:21
It's fine to be in a return, but as noted in the answer below, the return is written in JSX and not plain javascript. Thus any javascript needs to be enclosed in braces. You can try `-- {comment.author}, {new Date(comment.date).toLocaleDateString()}` and read more about [`toLocaleDateString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) — pilchard, Sep 17 '21 at 23:52
@pilchard thanks, your way works just as great as well. I didn't realize that every javascript needs to be enclosed in brackets. — mashtock, Sep 17 '21 at 23:58

score 2 · Accepted Answer · answered Sep 17 '21 at 23:13

2

Date.parse is indeed a function.

console.log(Date.parse);

All you need to do is pass the correct sort of argument to it. Your current code

Date.parse({comment.date})

is invalid syntax, because objects require key-value pairs. Pass just the comment date string to it, and it'll work - but, Date.parse returns a timestamp number, not a Date object. If you want a Date object, use new Date, and then you can use the various Date methods to extract what you want out of it.

const d = new Date("2014-09-05T17:57:28.556094Z");
console.log(d.getMinutes());

answered Sep 17 '21 at 23:13

CertainPerformance

356,069
52
309
320

First thanks for the answer, I'll try. But I'll admit I didn't quite understood, ain't {comment.date} suppose to be just the comment date string? – mashtock Sep 17 '21 at 23:20
It seems like while I'm inside the return function, Date is just being translated as a normal string... It also true for the "const" keyword and many others. It seems like I have to parse the Date outside the return which complicates things. – mashtock Sep 17 '21 at 23:29
`comment.date` is the proper plain syntax for extracting the `date` property from an object named `comment`. `{ comment.date }` is invalid syntax in JavaScript. But JSX uses brackets `{}` to delimit interpolation of JavaScript expressions into JSX markup. – CertainPerformance Sep 17 '21 at 23:32
Hmm but unfortunately I can't make jsx to interpolate Date.parse as a function inside a return statement... It reads it as a normal string, which is why const d = new Date("2014-09-05T17:57:28.556094Z"); ain't working for me :( – mashtock Sep 17 '21 at 23:42
If you want to assign to an identifier and do stuff with the value before returning, you'll need a function as well, either a named one beforehand or an IIFE. `const parseDateString = (dateStr) => /* do stuff and return */` then in JSX you can do `{parseDateString(comment.date)}` – CertainPerformance Sep 17 '21 at 23:44
Sounds good :) I'll give it a try. – mashtock Sep 17 '21 at 23:45
after creating a function beforehand returned an error " Line 37:48: 'myParseDate' is not defined no-undef" – mashtock Sep 17 '21 at 23:48
Sounds like you didn't define a function named `myParseDate` – CertainPerformance Sep 17 '21 at 23:49
Hmmm just a sec, it's doing something now :D – mashtock Sep 17 '21 at 23:50

Efficient way to create a Date object in react js

1 Answers1