54

I want to output the current date in my componnent. In the console my code works, but the React console says:

bundle.js:14744 Uncaught RangeError: Maximum call stack size exceeded

My component looks like that:

import React from 'react';
var FontAwesome = require('react-fontawesome');

export class Date extends React.Component {
    constructor() {
        super();

        var today = new Date(),
            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

        this.state = {
            date: date
        };
    }

    render() {
        return (
            <div className='date'>
                <FontAwesome name='calendar' />{this.state.date}
            </div>
        );
    }
}
1
  • How should JavaScript know that new Date() should refer to the built-in Date class and not your Date component? FWIW, the issue has nothing to do with React. Commented May 2, 2017 at 18:07

6 Answers 6

57

Your problem is that you are naming your component class Date. When you call new Date() within your class, it won't create an instance of the Date you expect it to create (which is likely this Date)- it will try to create an instance of your component class. Then the constructor will try to create another instance, and another instance, and another instance... Until you run out of stack space and get the error you're seeing.

If you want to use Date within your class, try naming your class something different such as Calendar or DateComponent.

The reason for this is how JavaScript deals with name scope: Whenever you create a newly named entity if there is already an entity with that name in scope, that name will stop referring to the previous entity and start referring to your new entity. So if you use the name Date within a class named Date, the name Date will refer to that class and not to any object named Date which existed before the class definition started.

0
23

OPTION 1: if you want to make a common utility function then you can use this

export function getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}

and use it by just importing it as

import {getCurrentDate} from './utils'
console.log(getCurrentDate())

OPTION 2: or define and use in a class directly

getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}
1
  • @StefanBecker How is 3 different Date objects? I only see one new Date(). I assume I don't understand something about how the Date object works, so just curious.
    – Jake
    Commented Feb 14, 2021 at 14:04
22

Full date and time :

{new Date().toLocaleString() + ""}

Extract only Month(current):

{new Date().toLocaleString("en-US", { month: "long" })}

Extract only day:

{new Date().toLocaleString("en-US", { day : '2-digit'})}

Extract only Year:

{new Date().getFullYear()}
1
  • 1
    For only Date: {new Date().toLocaleDateString()} Commented Jan 27, 2023 at 12:35
13

You can use the react-moment package

-> https://www.npmjs.com/package/react-moment

Put in your file the next line:

import moment from "moment";

date_create: moment().format("DD-MM-YYYY hh:mm:ss")
6

Simple Solution would be

{new Date().toLocaleString() + ''}
0

my little improvement

getCurrentDate(separator=''){

let newDate = new Date()
let date_raw = newDate.getDate();
let month_raw = newDate.getMonth() + 1;
let year = newDate.getFullYear();
var date, month
  
if (date_raw<10)  {  date ="0"+date_raw.toString()} else {  date =date_raw.toString()}
if (month_raw<10)  {  month ="0"+month_raw.toString()} else {  month =month_raw.toString()}


return (
    <div>{year}{separator}{month}{separator}{date}</div>
            );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.