React: Updating component

Question

I'm not sure what I'm missing here. I'm new to React and JS in general. Below is the full code for the one file along with the piece I'm interested in fixing.

I'm attempting to use setInterval to update the state every second so that the time re-renders and updates accordingly on screen. The console logs out the 'Hello!' statement every second but the time never updates. What am I missing here?

Thanks for any help!

import React, { Component } from 'react';

import DateDay from '../Date/Date';
import Time from '../Time/Time';
import './timedate.css'



class TimeDate extends Component{
  state = {
    curDate: '',
    curTime: '',
  };


componentDidMount() {


  const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  const optionsTime = { hour: '2-digit', minute: '2-digit' };
  const today = new Date();

  setInterval( () => {
    this.setState({curDate : today.toLocaleString("en-us", optionsDate)}),
    this.setState({curTime : today.toLocaleString("en-us", optionsTime).slice(0, -3)}) //slice removes the AM/PM
    console.log('Hello!')
  },1000)
}

render () {
  let { curDate } = this.state;
  let { curTime } = this.state;

  return (
    <div className="timedate">
       <DateDay 
          dateDay={curDate}
        />
        <Time 
          time={curTime}
        />
    </div>
         );
      }
}

export default TimeDate;

Yury Tarabanko · Accepted Answer · 2018-05-23 17:41:48Z

2

You are always using the same date

componentDidMount() {


  const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  const optionsTime = { hour: '2-digit', minute: '2-digit' };
  // const today = new Date(); captures current date for every next call.

  setInterval( () => {
    const today = new Date(); // move it here
    this.setState({curDate : today.toLocaleString("en-us", optionsDate)}),
    this.setState({curTime : today.toLocaleString("en-us", optionsTime).slice(0, -3)}) //slice removes the AM/PM
    console.log('Hello!')
  },1000)
}

Also you do want to stop interval when component got unmounted. You could do it this way

componentDidMount() {
  ...
  this.intervalId = setInterval(...)
}

componentWillUnmount() {
  clearInterval(this.intervalId)
}

answered May 23, 2018 at 17:41

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hitesh Chaudhari · Accepted Answer · 2018-05-23 17:44:23Z

0

You have initialized the state in the wrong way. State initialization should be in the constructor.

constructor() {
  super();
  this.state = {
    curDate: '',
    curTime: '',
  }
}

answered May 23, 2018 at 17:44

Hitesh Chaudhari

7151 gold badge7 silver badges12 bronze badges

1 Comment

Yury Tarabanko Over a year ago

Not with property initializers.

Shubham Khatri · Accepted Answer · 2018-05-23 17:46:00Z

You are not rendering the seconds, field so every second the data won't update also you need to calculate date inside setInterval

class TimeDate extends React.Component {
      state = {
        curDate: "",
        curTime: ""
      };

      componentDidMount() {
        const optionsDate = {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric"
        };
        const optionsTime = {
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit"
        };

        setInterval(() => {
          const today = new Date();
          this.setState({ curDate: today.toLocaleString("en-us", optionsDate) }),
            this.setState({ curTime: today.toLocaleString("en-us", optionsTime) }); //slice removes the AM/PM
          console.log("Hello!");
        }, 1000);
      }

    render () {
      let { curDate } = this.state;
      let { curTime } = this.state;

      return (
        <div className="timedate">
           <DateDay 
              dateDay={curDate}
            />
            <Time 
              time={curTime}
            />
        </div>
      );
    }
}

Working DEMO

Collectives™ on Stack Overflow

React: Updating component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related