Date is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../       actions/statistics';
import Moment from 'moment';

export default class GeneralReport extends React.Component {
    render () {
        //const { stat } = this.props;
        //console.log(this.props.stat)
        return (
            <div className = "general_report">
                <header className = "general_report_head">General Report</header>
                <div className="report_dates">
                    From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
                    To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
                </div>
                <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
                <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
            </div>
        );
   }
}

Reference: http://momentjs.com/

U can use the Date object method toDateString() also, try this:

<div className="report_dates">
    From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
    To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>
Answer from Mayank Shukla on Stack Overflow
Top answer
1 of 4
7

Date is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../       actions/statistics';
import Moment from 'moment';

export default class GeneralReport extends React.Component {
    render () {
        //const { stat } = this.props;
        //console.log(this.props.stat)
        return (
            <div className = "general_report">
                <header className = "general_report_head">General Report</header>
                <div className="report_dates">
                    From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
                    To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
                </div>
                <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
                <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
            </div>
        );
   }
}

Reference: http://momentjs.com/

U can use the Date object method toDateString() also, try this:

<div className="report_dates">
    From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
    To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>
2 of 4
1

This should work and not give you any error.

import React, { PropTypes } from 'react';
import classnames           from 'classnames';
import Actions              from '../../actions/statistics';
import moment               from 'moment';

export default class GeneralReport extends React.Component {
  render () {
    const { stat } = this.props
    const { dateFrom, dateTo, revenue, order } = stat
    return (
      <div className="general_report">
        <header className="general_report_head">
          General Report
        </header>
        <div className="report_dates">
        From
        <span className="number">
          {moment(dateFrom).format('YYYY-MM-DD')}
        </span>
        To
        <span className="number">
          {moment(dateTo).format('YYYY-MM-DD')}
        </span>
        </div>
        <div className="report_main_result">
          Total Revenue:
        <span className="number">
          {revenue}
        </span>
        </div>
        <div className="report_main_result">
        Total orders:
        <span className="number">
          {order}
        </span>
        </div>
      </div>
    );
  }
}
🌐
freeCodeCamp
forum.freecodecamp.org › javascript
How to convert date to dd-mm-yyyy in react - JavaScript
November 19, 2020 - Hi, I am new to react (just three days) and I currently doing a project using my past experience in Jquery and ASP.NET to write the project. The challenge I am currently having now is how to convert date in JSON (2018-…
Discussions

react native - How to get DD-MM-YYYY format date - Stack Overflow
I'm using Parse database. I store date format. when using console i get this format : Tue Jul 18 2017 15:46:47 GMT+0100 (CET) I want to get this format : 18-07-2017. Any idea please More on stackoverflow.com
🌐 stackoverflow.com
javascript - React JS get current date
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 lo... More on stackoverflow.com
🌐 stackoverflow.com
Format JavaScript date as yyyy-mm-dd - Stack Overflow
All given answers are great and helped me big. In my situation, I wanted to get the current date in yyyy mm dd format along with date-1. More on stackoverflow.com
🌐 stackoverflow.com
How can I change YYYY-MM-DDTHH:MM:SSZ to MM/DD/YYYY HH:MM:SS
There’s string cutting stuff you can do but easiest I can think of is either =DATEVALUE(LEFT(A2,10))+TIMEVALUE(MID(A2,12,8)) =SUBSTITUTE(SUBSTITUTE(A2,"T"," "),"Z"," ") To make proper values of the inputs, then use any date/time format you like. More on reddit.com
🌐 r/excel
9
3
January 10, 2019
🌐
SheCodes
shecodes.io › athena › 7466-how-to-get-current-date-in-react
[React] - How to get current date in React - SheCodes | SheCodes
In React, you can use the `Date()` function to get the current date as a `Date` object in JavaScript. This object can be formatted as desired.
🌐
Font Awesome
fontawesomeicons.com › fa › react-js-date-format-example
React Date Format : dd/mm/yyyy, yyyy-mm-dd , mm/dd/yyyy , dd-mmm-yyyy
February 17, 2024 - In this second example, we show how to format a date in yyyy-mm-dd format in ReactJS. We use date.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }) to convert the current date into the yyyy-mm-dd format in ReactJS.
Find elsewhere
🌐
ItSolutionstuff
itsolutionstuff.com › post › how-to-change-date-format-in-reactexample.html
How to Change Date Format in React? - ItSolutionstuff.com
September 6, 2020 - This article will provide example of react change date format example. i would like to share with you how to change date format in react js. you can understand a concept of react convert date format example. We will look at example of how to convert date format in react. Follow bellow tutorial step of react date format yyyy mm dd to mm/dd/yyyy example.
🌐
react-date-object
shahabyazdi.github.io › react-date-object
Date Object | react-date-object
March 2, 2021 - import DateObject from "react-date-object"; import persian from "react-date-object/calendars/persian"; import persian_fa from "react-date-object/locales/persian_fa"; import persian_en from "react-date-object/locales/persian_en"; var date = new DateObject({ date: new Date(), }); console.log...
🌐
Reactshark
reactshark.com › blog › guide-react-date-format
Complete guide of Reactjs date format dd/mm/yyyy - React blog
August 28, 2021 - The most clear way to format a date (dd/mm/yyyy) or (yyyy/mm/dd) in React is to use: date-fns. Also, in this article you will learn how to format dates with just Vanilla JavaScript!
🌐
npm
npmjs.com › package › react-date-object
react-date-object - npm
July 8, 2024 - import DateObject from ... import persian_en from "react-date-object/locales/persian_en"; var date = new DateObject({ date: new Date(), }); console.log(date.format()); //2020/08/21 date = new DateObject({ date: ...
      » npm install react-date-object
    
Published   Jul 08, 2024
Version   2.1.9
Author   Shahab Yazdi
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › how-to-format-javascript-date-as-yyyy-mm-dd
How To Format JavaScript Date as yyyy-mm-dd? - GeeksforGeeks
June 24, 2025 - We use JavaScript built-in help methods from the Date class that help us to create a formatted version of the current date in the form of yyyy-mm-dd.
Top answer
1 of 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.

2 of 6
24

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}`
}
🌐
MDBootstrap
mdbootstrap.com › standard › material design for bootstrap 5 & vanilla javascript
date picker get value in dd/mm/yyyy format in mdb react - Material Design for Bootstrap
July 15, 2019 - how to use $('.datepicker').pickadate({ format: 'yyyy/mm/dd', formatSubmit: 'yyyy/mm/dd' }) in mdbreact or there is any other way. ... Datepicker receives format property, where you can set any format you want.
🌐
Altcademy
altcademy.com › blog › how-to-format-datetime-in-reactjs
How to format datetime in ReactJS - Altcademy.com
July 5, 2023 - Here's an example: let currentDate = moment().format('MMMM Do YYYY, h:mm:ss a'); console.log(currentDate); This will output the date in a format like "January 3rd 2022, 3:25:45 pm".
🌐
Syncfusion
ej2.syncfusion.com › domain url › react › documentation › datepicker › date format
Date format in React Datepicker component | Syncfusion
// import the datepickercomponent ... {}> { private dateValue:Date=new Date(); public render() { return <DatePickerComponent id="datepicker" value={this.dateValue} format='yyyy-MM-dd' placeholder='Enter date' /> } }; ...
🌐
W3Resource
w3resource.com › javascript-exercises › javascript-basic-exercise-3.php
JavaScript: Display the current date in various format - w3resource
// Get the current date var today = new Date(); // Get the day of the month var dd = today.getDate(); // Get the month (adding 1 because months are zero-based) var mm = today.getMonth() + 1; // Get the year var yyyy = today.getFullYear(); // Add leading zero if the day is less than 10 if (dd < 10) { dd = '0' + dd; } // Add leading zero if the month is less than 10 if (mm < 10) { mm = '0' + mm; } // Format the date as mm-dd-yyyy and log it today = mm + '-' + dd + '-' + yyyy...