Build a Digital Clock

Question

Accepted Answer

To build a digital clock in React, the core idea is to use `useState` to hold the current time and `useEffect` with `setInterval` to update it every second. We'll manage the 12/24-hour format with another `useState` and format the time accordingly.

### Step 1 — Initialize State for Time and Format
Start by setting up two state variables: one for the current `time` (initialized to a new `Date` object) and another for `is24HourFormat` (a boolean, defaulting to true).
```jsx
import React, { useState, useEffect } from 'react';

const DigitalClock = () => {
  const [time, setTime] = useState(new Date());
  const [is24HourFormat, setIs24HourFormat] = useState(true);
  // ... rest of the component
};
```

### Step 2 — Update Time Every Second with `useEffect`
Use `useEffect` to set up a `setInterval` that updates the `time` state every 1000 milliseconds (1 second). Remember to clear the interval in the cleanup function to prevent memory leaks.
```jsx
  useEffect(() => {
    const timerId = s

Build a Digital Clock

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)