Digital Clock in Reactjs

Its simple program I made while learning reactjs. You can put this on websites to automate clock, nothing else needed.

Tech

• reactjs
• Any web browser

Code go through

Create a React componenet, and set state to Date object. Create function to set state to new Date object. Now we will override componentDidMount to call function tick every second, it will update state of component to new current Date object, which will make it look like clock is running in real time.

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date: new Date()};
  } 
  tick(){
    this.setState({date: new Date()});
  }
  componentDidMount(){
    this.timerID = setInterval(
      () => this.tick(),1000
    );
  }
  componentWillUnmount(){
    clearInterval(this.timerID);
  }
  render(){
    return(
      <div>
        <h1> Time is {this.state.date.toLocaleTimeString()}.</h1>
      </div>
    );
  }
}

ReactDOM.render(
<Clock />, document.getElementById('divid')

Conclusion

You can check working of it here https://codepen.io/darowo9631/pen/oNYKzgN. Feel free to make cool versions of it.

Questions or comments? Send an email to zerocod3r@protonmail.com.