Clock component

I’m working on various time zones. I suppose to make the clock.js I need to set up the clock component that is defined with two functions called createInterval() and cleanUpInterval(). Here is my code. I’m not sure I’m doing this right. Here is the message. Here are the instructions. and here are the HTML and JavaScript pages.

The rendered React application should display a clock for various time zones. Right now, the clock is stuck on the initially rendered time and we’d like to use intervals to update the time. In Clock.js, a Clock component is defined with functions called createInterval() and cleanUpInterval(). Use these functions to fix the application by doing the following:

  • Create an effect that executes on the first render and any changes to the timezone prop.
  • Pass an inline function as the first argument to the effect which should call createInterval() and store the returned value in a constant called intervalId.
  • The effect function should clean up the previous intervalId before calling createInterval() when it re-executes due to changes to the timezone prop. Call cleanUpInterval() with intervalId as an argument and return its value.

-----HTML-----
< !DOCTYPE html>< html lang=“en”>< head>

< meta charset=“UTF-8” />
< meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
< link rel=“stylesheet” href=“styles.css” />
< /head>
< body>
< main id=“app”>
< /main>
< script src=“https://content.codecademy.com/courses/React/react-18-course-bundle.min.js”>< /script>
< script src=“index.compiled.js”>< /script>
< script type=“text/javascript” src=“https://www.codecademy.com/assets/relay.js”>< /script>< /body>< /html>
Note: Make sure you backspace the arrows (< >).

-----JavaScript-----
import React, { useState, useEffect } from ‘react’;

function Clock(props){
const [date, setDate] = useState(new Date());

function createInterval() {
const delay = 1000;
return setInterval(() => {
setDate(new Date());
}, delay)
}

function cleanUpInterval(id) {
return () => clearInterval(id);
}

// Make updates to date here using an effect.
useEffect(() => {
const intervalId = setInterval(() => {
setDate(new Date());
}, 1000)

return () => clearInterval(intervalId);

}, )

return (
  <div>
    <p className='clock-text'>{date.toLocaleTimeString('en-us', {'timeZone': props.timezone})}</p>
    <p className='timezone-text'>{props.timezone}</p>
  </div>
);

}

export default Clock;
Screenshot 2023-12-01 122629

not sure if you tried this yet but put props.timezone in the dependency array.

This is what I wrote. It turns out to be the wrong answer. I was wondering if anyone could update the solution.
Screenshot 2024-06-04 224543

It deals with “State Hook,” “Effect Hook,” and “Hooks” in “React, Part 2” on Codecademy. Is on the Full-Stack Engineer Path Course.