Search code examples
reactjsreactstrap

Efficient way to create a Date object in react js


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.


Solution

  • 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());