javascript - Where to apply my moment() function in a react component? -

i trying clock component, give date , time in local format in webpage. imported momentjs using command line npm moment --save in webpack environment. next wrote in clock.jsx component (mostly based on react example on website).

import react 'react'; import moment 'moment';  export default class clock extends react.component {   constructor(props) {     super(props);     this.state = {       datetimestamp : date.now()     };   }   tick = () => {     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(       <div classname="clock"> heure locale : {date}</div>     ); }  } 

doing timestamp incremented correctly. however, when passing new state element in object, first value (based on date.now() ) calculated in constructor each tick, timestamp incrementing formatted date stuck on first value. here code.

import react 'react'; import moment 'moment';  export default class clock extends react.component {   constructor(props) {     super(props);     this.state = {       datetimestamp : date.now(),       dateformatted : moment(date.now()).tostring()     };   }   tick = () => {     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(       <div classname="clock"> heure locale : {date}</div>     ); }  } 

does explain me solving issue above tell me going wrong piece of code?

thanks

update: in end use of moment not appropriate, if cannot figure out why not work way. find below correct implementation have date , time refreshed every seconds.

import react 'react'; import moment 'moment';  export default class clock extends react.component {   constructor(props) {     super(props);     this.state = {       dateformatted : moment().locale('fr').format('dddd mmmm yyyy hh:mm:ss').tostring()     };   }   tick = () => {     this.setstate({       dateformatted : moment().locale('fr').format('dddd mmmm yyyy hh:mm:ss').tostring()     });   }   componentdidmount() {     this.interval = setinterval(this.tick, 1000);   }   componentwillunmount() {     clearinterval(this.interval);   }   render() {     const date = this.state.dateformatted;     return(       <div classname="clock"> date (locale) : {date}</div>     );   } } 

this "solves" anti pattern issue exposed below (different cross-dependant setstate() call). need timestamp other reason find workaround.

@krzysztofsztompka correct, add maintaining 2 separate state variables represent current date number , formatted string antipattern. derived state variables (i.e., state variables can calculated using state variable) increases responsibility on developer keep 2 state variables in sync. may not seem difficult in simple example, can become more difficult in larger, more complicated components/apps. instead, considered better practice maintain 1 source of truth , calculate derived values on fly need them. here's how apply pattern example.

import react 'react'; import moment 'moment';  export default class clock extends react.component {    constructor(props) {     super(props);     this.state = {       datetimestamp : date.now()     };     this.tick = this.tick.bind(this);   }    tick() {     this.setstate({       datetimestamp: this.state.datetimestamp + 1     });   }    componentdidmount() {     this.interval = setinterval(this.tick, 1000);   }    componentwillunmount() {     clearinterval(this.interval);   }    render() {     // calculate formatted date on fly     const date = moment(this.state.datetimestamp).tostring();     return(       <div classname="clock"> heure locale : {date}</div>     );   }  }