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

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>
    </>
  );
}

enter image description here

CodePudding user response：

App.js File

Header File

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

CodePudding user response：

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