import React from 'react';
import './index.css';
import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
 <App />, 
 document.getElementById('root')
);

import { useState, useEffect } from 'react';

function App() {
 const [date, setDate] = useState(new Date());
 
 useEffect(() => {
 const intervalId = setInterval(() => {
 setDate(new Date());
 }, 1000)

 return () => clearInterval(intervalId);
 }, [])

 return (
 
 {date.toLocaleTimeString()}
 
 );
}

export default App;

.clock {
  text-align: center;
  margin-top: 8rem;
  font-size: 3rem;
  font-weight: bold;
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
 this.succeeded = false;
 this.reason = "";
 this.input = "";
 this.expected_output = "";
 this.actual_output = "";
}

export const executeTests = function() {

 var results = [];

 result = new TestResult();
 result.input = 'HelloWorld Component';
 result.expected_output = "span containing text 'Hello World'"

 let wrapper = shallow(<HelloWorld />);

 // Call your Challenge function here.

 let type = wrapper.type();
 let testSuccessful = true;
 let failureReason;

 if (type !== 'span') {
 testSuccessful = false;
 failureReason = "You need to render exactly one span HTML element";
 } else if (wrapper.props().children != "Hello World") {
 testSuccessful = false;
 failureReason = "You have rendered wrong message in your span element";
 }

 result.actual_output = wrapper.html();

 if (testSuccessful) {
 result.succeeded = true;
 result.reason = "Succeeded"
 } else {
 result.succeeded = false;
 result.reason = failureReason;
 }

 results.push(result);

 return results;
}

react_clock-copy

React

Dart

GoJS React

Typescript React

Vue.js

import { useState, useEffect } from 'react';

function App() {
 const [time, setTime] = useState({
 minutes: new Date().getMinutes(),
 hours: new Date().getHours(),
 seconds: new Date().getSeconds()
 })
 
 useEffect(() => {
 const intervalId = setInterval(() => {
 const date = new Date();
 setTime({
 minutes: date.getMinutes(),
 hours: date.getHours(),
 seconds: date.getSeconds()
 })
 }, 1000)

 return () => clearInterval(intervalId);
 }, [])

 const convertToTwoDigit = (number) => {
 return number.toLocaleString('en-US', {
 minimumIntegerDigits: 2
 })
 }

 return (
 <div className='clock'>
 {convertToTwoDigit(time.hours)}:
 {convertToTwoDigit(time.minutes)}:
 {convertToTwoDigit(time.seconds)}
 {time.hours >= 12 ? ' PM' : ' AM'}
 </div>
 );
}

export default App;

react_digital_clock.tar.gz

react_clock

How to create a dynamic digital clock in React

In React, dynamically update the digital clock using `useEffect` and `setInterval`, clearing interval on unmount.

How to create a dynamic digital clock in React

Coding example 1

Explanation

Coding example 2

Explanation