CODEWITHSUNDEEP
javascriptreactjsdatecalendar
Elijah.S
Elijah.S

Reputation: 47

Can the vanilla JS date object be used normally in React.js?

I'm trying to get the last date of the current month so I can accurately display calendar days so I'm using the vanilla JS date object. However, from what I've seen by console logging the date object, it seems as though it's a completely different object, presumably a react object. So how can I access the date object?

I've tried using the toString method to unwrap the date object into a string which didn't work because it turns into an array with the object in it.

componentDidMount() {
    let date;
    date = new Date(2019, 11, 5);
    console.log(date)
}

I expect the date object to be outputted instead of the unknown object

EDIT:

The unknown object looks like this in the console:

{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, 
props: {…}, …}

DOUBLE EDIT:

Here's the minimum reproducible code.

So while doing this I figured out that the date changes from the default date structure Ex. Mon May 27 2019 16:00:56 etc. to the other object when I import in the Date component for some reason.

File App.js

import React from "react";
import Calendar from "./Calendar"

function App() {
    return (
        <div>
            <Calendar />
        </div>    

    )
}

export default App;

File Calendar.js

import React from "react";
import Date from "./Date";    

class Calendar extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        let date = new Date();
        console.log(date)
    }

    render() {
        return (
            <Date /> 
        )
    }
}

export default Calendar;

File Date.js

import React from "react";

function Date() {
    return (
        <div className="grid date">
            <p>1</p>
        </div>
    )
}

export default Date;

Upvotes: 1

Views: 433

Answers (5)

Emile Bergeron
Emile Bergeron

Reputation: 17430

You're importing a component as Date which overshadows the Date global object. Meaning that when looking for Date in the scope chain, JavaScript will stop at the module scope with your custom Date component instead of going up to the global scope and finding the Date global.

import Date from "./Date";

An easy way to avoid that is just to change the name in which your date component is imported.

import React from 'react';
import DateComponent from './Date';   

class Calendar extends React.Component {
    componentDidMount() {
        // No ambiguity here anymore!
        const date = new Date();
        console.log(date);
    }

    render() {
        // Explicit component name.
        return <DateComponent />;
    }
}

And to avoid any ambiguity in your project, I'd rename the Date.jsx file to DateComponent.jsx as well.

Another way to avoid this ambiguity is to use the window global object properties explicitly.

import React from 'react';
import Date from './Date';   

class Calendar extends React.Component {
    componentDidMount() {
        // No ambiguity here anymore!
        const date = new window.Date();
        console.log(date);
    }

    render() {
        // Explicit component name.
        return <Date />;
    }
}

Upvotes: 2

Elijah.S
Elijah.S

Reputation: 47

Wow, I figured out the problem and the simplicity of it almost makes me wanna bash my head. Though I'm not sure about the specifics, it seems the naming of the Date component was interfering with the date object which is being instantiated. So I am assuming that somehow, although I was trying to output the Date object, I was actually outputting the Date component, hence the unknown object being the Date component with its corresponding classes grid date. If anyone can clarify what's going on in the nitty gritty, I'd love to hear it! Also, thank you for all your replies!

Upvotes: 0

noor
noor

Reputation: 1691

import React, { Component } from "react";

export default class App extends Component {
  state = {
    date: ""
  };
  componentDidMount() {
    this.setState({
      date: new Date().toISOString().slice(0, 10)
    });
  }
  render() {
    return <div>{this.state.date}</div>;
  }
}

Remember there are tons of ways to achieve this. But keeping it Vanilla flavoured as per OP's request.

Upvotes: 0

iqbal125
iqbal125

Reputation: 1431

Yes Dates are used normally in React.

One way to work with dates would be the moment.js library. So you can do something like: 

componentDidMount() {
    let date;
    date = new Date(2019, 11, 5);
    let formatted_date = moment(date).format('MMMM Do, YYYY | h:mm a') 
    console.log(formatted_date)
}

Upvotes: -2

arthurakay
arthurakay

Reputation: 5651

The JavaScript Date object has built-in methods you can use to format the date into a string:

componentDidMount() {
    let date = new Date();
    console.log(date.toLocaleDateString()) // "5/27/2019"
}

Upvotes: 1

Related Questions