如何使用状态在 React.js 中显示日期？

Question

I'm trying to display date using React.js but for some reason it's not displaying anything.

I'm a beginner so I'm sorry if I'm asking a stupid question, but I can't figure out why it's not working. Can someone please help me? Thanks so much!

class App extends React.Component {
  state = {
    date: ""
  };

  getDate() {
    var date = { currentTime: new Date().toLocaleString() };

    this.setState({
      date: date
    });
  }

  render() {
    return (
      <div class="date">
        <p> ddd {this.state.date}</p>
      </div>
    );
  }
}

export default App;

Answer 1

You're trying to get the state of the date without explicitly setting it first. With that in mind call the getDate() method in something like, ComponentDidMount :

class App extends App.Component {
  ...
  componentDidMount() {
    this.getDate();
  }
  ...
}

From there you should be able to retreive it in your render call:

render() {
  return (
    <div class="date">
      <p> ddd {this.state.date}</p>
    </div>
  );
}

Update:

constructor() is probably more suitable for this situation as no external requests are called to retrieve said data:

constructor(props) {
  super(props);
  this.state = {
    date: new Date().toLocaleString()
  };
}

Answer 2

Try doing:

var date = new Date();
this.setState({ date });

instead of

var date = {currentTime: (new Date()).toLocaleString()}
this.setState({date:date });

And check if the current date shows up.

Then check out how to alter the date field with some format.

Hope this helps you out

Answer 3

Here's a simple way:

class App extends React.Component {
  state = {date: new Date()}

  render() {
    return (
      <div class="date">
        <p> ddd {this.state.date.toLocaleDateString()}</p>
      </div>
    );
  }
}

export default App;

Cheers!

Answer 4

I would suggest looking up component lifecycle methods .

The state hasn't been set because you never call getDate(), so you're just getting an empty string.

import React from "react";

export default class App extends React.Component {
  state = {
    date: ""
  };

  componentDidMount() {
    this.getDate();
  }

  getDate = () => {
    var date = new Date().toDateString();
    this.setState({ date });
  };

  render() {
    const { date } = this.state;

    return <div>{date}</div>;
  }
}

Answer 5

You can use JavaScript codes by using ${} like following:

<span className="xyz">
      {`${new Date().toLocaleString()}`}
</span>

Please note that you need to use the Grave Accent character (ie ` ) around the ${} .

Or if you want to convert a date-time string to local value, you can follow this solution:

<span className="xyz">
      {`${formData.updatedAt ? new Date(formData.updatedAt).toLocaleString() : ""}`}
</span>