title: Where to apply my moment() function in a react component?
body: <p>I am trying to do a clock component, simply to give the date and time in local format in a webpage. I imported MomentJS using the command line npm i moment --save in my webpack environment. Next I wrote this in my Clock.jsx component (mostly based on the React example on the website).</p>
  
  <pre><code>import React from 'react';
  import Moment from 'moment';
  
  export default class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dateTimestamp : Date.now()
      };
    }
    tick = () =&gt; {
      this.setState({dateTimestamp: this.state.dateTimestamp + 1});
      console.log('tick');
    }
    componentDidMount() {
      this.interval = setInterval(this.tick, 1000);
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }
    render() {
      const date = this.state.dateTimestamp;
      return(
        &lt;div className="clock"&gt; Heure locale : {date}&lt;/div&gt;
      );
  }
  
  }
  </code></pre>
  
  <p>Doing this the timestamp incremented correctly. However, when passing a new state element in the object, the first value (based on Date.now() ) is calculated in the constructor but for each tick, only the timestamp is incrementing the formatted date is stuck on its first value. Here is the code.</p>
  
  <pre><code>import React from 'react';
  import Moment from 'moment';
  
  export default class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dateTimestamp : Date.now(),
        dateFormatted : Moment(Date.now()).toString()
      };
    }
    tick = () =&gt; {
      this.setState({dateTimestamp: this.state.dateTimestamp + 1});
      console.log(this.state.dateTimestamp);
      this.setState({dateFormatted: Moment(this.state.dateTimestamp).toString()});
      console.log(this.state.dateFormatted);
    }
    ...
    render() {
      const date = this.state.dateFormatted;
      return(
        &lt;div className="clock"&gt; Heure locale : {date}&lt;/div&gt;
      );
  }
  
  }
  </code></pre>
  
  <p>Does anyone could explain help me solving this issue but above all tell me what is going wrong with my piece of code?</p>
  
  <p>Thanks </p>
  
  <p>UPDATE: In the end my use of moment was not appropriate, even if I cannot figure out why it would not work this way. Find below my correct implementation to have the date and time refreshed every seconds.</p>
  
  <pre><code>import React from 'react';
  import Moment from 'moment';
  
  export default class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dateFormatted : Moment().locale('fr').format('dddd Do MMMM YYYY HH:mm:ss').toString()
      };
    }
    tick = () =&gt; {
      this.setState({
        dateFormatted : Moment().locale('fr').format('dddd Do MMMM YYYY HH:mm:ss').toString()
      });
    }
    componentDidMount() {
      this.interval = setInterval(this.tick, 1000);
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }
    render() {
      const date = this.state.dateFormatted;
      return(
        &lt;div className="clock"&gt; Date (locale) : {date}&lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This also "solves" the anti pattern issue exposed below (different cross-dependant setState() call). I would need the timestamp for any other reason but I will find a workaround.</p>