[ ReactJs ] Date Time Event ( https://codesandbox.io/s/event-8x24w )

Event.js

import React from 'react';
 
class Event extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time: new Date()
        }
    }
 
    // it runs after the component output has been rendered to the DOM
    componentDidMount() {
        this.clockID = setInterval(
            () => this.tick(),
            1000
        );
    }

    // it runs right before React unmounts and destroys our component
    componentWillUnmount() {
        clearInterval(this.clockID);
    }
 
    tick = () => {
        this.setState({
            time: new Date()
        })
    }
 
    render() {
        return (
            <h4>Current Date is:
            <p>(DD/MM/YYYY format)</p> {this.state.time.toLocaleDateString('en-GB')}<hr/>
            <p>(MM/DD/YYYY format)</p> {this.state.time.toLocaleDateString('en-US')}<hr/>
            <p>(YYYY.M.D format)</p> {this.state.time.toLocaleDateString('ko-KR')}<hr/>
            <p>Current Time is AM/PM format:</p> {this.state.time.toLocaleTimeString()}<hr/>
            <p>Current Time is 24 Hours format:</p> {this.state.time.toTimeString()}<hr/></h4>
        );
    }
}
 
export default Event;