React JS get current date

Question

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>         );     } } 

Yeah, I know I'm a pretty beginner, but maybe someone can help me. I googled for hours -.-

Thx alot!

Answer 1

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.

Answer 2

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}` }