ReactでMomentライブラリを使用して現在の時刻を表示する方法

Moment.jsをインストールするまず、プロジェクトのルートディレクトリで以下のコマンドを実行してMoment.jsをインストールします。

npm install moment

コンポーネントでMomentをインポートする時刻を表示したいReactコンポーネントで、Momentをインポートします。

import React from 'react';
import moment from 'moment';

現在の時刻を取得して表示するコンポーネントの状態（state）に現在の時刻を格納し、それを表示します。

import React, { useState, useEffect } from 'react';
import moment from 'moment';
const Clock = () => {
  const [currentTime, setCurrentTime] = useState('');
  useEffect(() => {
    const intervalId = setInterval(() => {
      const now = moment().format('YYYY-MM-DD HH:mm:ss');
      setCurrentTime(now);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, []);
  return <div>{currentTime}</div>;
};
export default Clock;

上記のコードでは、Clockコンポーネントが現在の時刻を1秒ごとに更新します。useEffectフックを使用して、コンポーネントがマウントされたときにインターバルを設定し、コンポーネントがアンマウントされたときにインターバルをクリアします。

コンポーネントを表示する時刻を表示したい場所で、Clockコンポーネントを表示します。

import React from 'react';
import Clock from './Clock';
const App = () => {
  return (
    <div>
      <h1>現在の時刻</h1>
      <Clock />
    </div>
  );
};
export default App;

上記の例では、Appコンポーネント内でClockコンポーネントを表示しています。