Onclick to Get Current Time in react js

Onclick to Get Current Time in react js

In this example you can learn how to onclick to get current time in react js. This post will give you example of get current time in react js using react hooks and react built in function. Sometime your require to get current time onclick button. Onclick to get current time using useState hooks and toLocaleTimeString.

useState

useState to you can update or change data in your functional component in react. useState is a Hook ( method or function ) that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value and another function to update this value.

toLocaleTimeString

The toLocaleTimeString() function converts the current local time of a Time object into a readable string, using locale conventions.

Read Also :  How to Use For Loop in React with Example

Example : Onclick to Get Current Time in React js

Index.js

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

function CTime(){
  const time = null;
  const [ctime,setDate] = useState(time); 

  const handelTime = () =>{
    let time = new Date().toLocaleTimeString();
    setDate(time);
  }

  return(
    <>
      <h3>{ctime}</h3>
      <button onClick={handelTime}>Get Current Time</button>
    </>

  )

}

ReactDOM.render(<CTime />,document.getElementById("root"));