React Get Current Time

To get the current time in either 24-hour or 12-hour format using React.js, you can use JavaScript's Date object. First, create a new Date instance, then extract hours and minutes. For 24-hour format, use the getHours() and getMinutes() methods, while for 12-hour format, include getHours() and getMinutes() with additional logic to determine AM/PM.

written

reviewed

updated

How do you get and display the current 24-hour time in Reactjs?

This React.js code snippet creates a simple web application that displays the current time in 24-hour format. It uses the useState and useEffect hooks for state management and updates. Inside the useEffect hook, a setInterval function is used to update the time every second. It creates a new Date object, extracts the hours, minutes, and seconds, and formats them into a time string. This time string is stored in the 'currentTime' state variable, which is then rendered in the JSX. The interval is cleared when the component unmounts to prevent memory leaks.

React Js Get Current Time In 24 Hour Format

<script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const [currentTime, setCurrentTime] = useState('');

      useEffect(() => {
        const intervalId = setInterval(() => {
          const now = new Date();
          const hours = now.getHours();
          const minutes = now.getMinutes();
          const seconds = now.getSeconds();
          const timeString = `${hours}:${minutes}:${seconds}`;

          setCurrentTime(timeString);
        }, 1000); // Update every second

        return () => clearInterval(intervalId);
      }, []);

      return (
        <div className='container'>
          <h1 className='title'>React JSCurrent Time (24-hour format):</h1>
          <p className='time'>Current Time 24 hours Format : {currentTime}</p>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Get Current Time In 24 Hour Format

Pasted Image

How do you display the current time in 12-hour format using Reactjs?

This React component fetches and displays the current time in a 12-hour format. It utilizes the useState and useEffect hooks to manage and update the currentTime state. Inside the useEffect, a function updateTime is defined to get the current time, format it to a 12-hour clock, and update the state. An interval is set to call updateTime every second to keep the time updated. The component renders the current time in a container with a header, showing the time in the format "hh:mm AM/PM." When the component unmounts, it cleans up the interval.

React Js Get Current Time in 12 Hours Format

  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const [currentTime, setCurrentTime] = useState('');

      useEffect(() => {
        const updateTime = () => {
          const now = new Date();
          const hours = now.getHours();
          const minutes = now.getMinutes();
          const ampm = hours >= 12 ? 'PM' : 'AM';
          const formattedHours = hours % 12 || 12;
          const formattedMinutes = minutes.toString().padStart(2, '0');
          setCurrentTime(`${formattedHours}:${formattedMinutes} ${ampm}`);
        };

        // Update the time every second
        const intervalId = setInterval(updateTime, 1000);

        // Clear the interval when the component unmounts
        return () => clearInterval(intervalId);
      }, []);

      return (
        <div className='container'>
          <h2 className='header'>React Get Current Time (12-Hour Format):</h2>
          <p className='time'>{currentTime}</p>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById('app'));
  </script>

Run

Output of React Js Get Current Time in 12 Hours Format