How can I add full live date & time to header component in react?

Question

I need to add the full live date and time in my header components. Please help me with the same!

export default function Header(props) {
  return (
    <>
      <div className="containerbox">
        <img
          className="header-img"
          src="https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1129&q=80"
          alt="header-img"
        ></img>
        <h2>To Do List</h2>
      </div>
    </>
  );
}

Answer 1

App.js File

Header File

You can pass the props App.js file and received file in Header File and show the output

Answer 2

Try this!

import React, { useState , useEffect } from 'react'

export const DateTime = () => {

var [date,setDate] = useState(new Date());

useEffect(() => {
    var timer = setInterval(()=>setDate(new Date()), 1000 )
    return function cleanup() {
        clearInterval(timer)
    }

});

return(
    <div>
        <p> Time : {date.toLocaleTimeString()}</p>
        <p> Date : {date.toLocaleDateString()}</p>

    </div>
)

}

export default DateTime