How can I format date inside of a react component?

Question

I'm trying to format the date inside the react component, it displays as "2022-09-26T04:46:11.629Z" but I want it in the MM/DD/YYYY format. Should I modify mongodb or just front end? Can anybody help me, please? I used Date() and it worked but my database stopped working. I'm doing full stack.

This is my code:

import React, { useContext, useState } from 'react';
import PostsContext from '../contexts/PostsContext';
import { Link } from "react-router-dom";
import '../App.css'
import UserContext from '../contexts/UserContext';

function PostsList(props) {

    let { deletePosts } = useContext(PostsContext);

    let users = useContext(UserContext);


    return (
        <PostsContext.Consumer>
         {
            ({ posts }) => {
                return <div>
                    <h3>Welcome back, "User's name"</h3>
                    <a href="/posts/new"><button>Add New Post</button></a>
                    <div>
                        {posts.map((c) => {
                            console.log(posts)
                            return (
                                <div className='posts_list'>
                                <div key={c._id}>
                                </div>
                                <div className='posts_text'>
                                    <h2>{c.name}</h2>
                                </div>
                                    <div className='list'>
                                    <Link to={`/edit/${c._id}`}>
                                    <button>Edit</button>
                                    </Link>
                                    <button onClick={() => { deletePosts(c._id)}}>Delete</button>
                                    <p>Tweet created on: {c.createdAt}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            }
        }
        </PostsContext.Consumer>
    );
}


export default PostsList;

I found the answer to my question:

var date = new Date('2010-10-11T00:00:00+05:30'); alert(((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear())

@AndyRay honestly no because I don't want to create another variable, I am retrieving the info from the db, I want to render it in a different format. — Aquiles Bailo, Sep 27 '22 at 02:49
`{formatDate(c.createdAt)}` and create that function that formats the date like the duplicate question says — Andy Ray, Sep 27 '22 at 02:55

score 0 · Accepted Answer · answered Sep 27 '22 at 03:06

0

Just like Andy's suggestion, the formatDate function should be:

let formatDate=(input)=>{
    let v=new Date(input);
    return v.toLocaleDateString("en-US")
}

answered Sep 27 '22 at 03:06

The KNVB

3,588
3
29
54

How can I format date inside of a react component?

1 Answers1