Firebaseに保存したtimestamp型のデータを表示させる

現在作成している自作アプリでFirebaseを利用していて、timestamp型のデータの表示方法を備忘録としてまとめ。

1. まずはtoDate()で日時表記に
2. formatを使って文字列にし、任意の形式に成形する
参考サイト

timestamp型のデータをそのまま取得すると下記のようなデータになっている。(startDateというtimestamp型のデータを取得した場合)

console.log(startDate);

// 下記のように表示される

et {seconds: 1663531578, nanoseconds: 436000000}

nanoseconds: 436000000

seconds: 1663531578

1. まずはtoDate()で日時表記に

const start = startDate.toDate();

console.log(start);

// Mon Sep 19 2022 05:06:18 GMT+0900 (日本標準時)

console.log(typeof(start))

// object

ただし、このままだとobjectなので、そのまま

<div>開始日時：{start}</div>

という風に表示させようとすると

Uncaught Error: Objects are not valid as a React child (found: Mon Sep 19 2022 05:06:18 GMT+0900 (日本標準時)). If you meant to render a collection of children, use an array instead.

というエラー文が表示される。なので、

2. formatを使って文字列にし、任意の形式に成形する

import { format } from 'data-fns'

const formattedStart = format(start, 'yyyy/MM/dd')

console.log(formattedStart);

// 2022/09/19

console.log(typeof(formattedStart));

// string

上記のようにすることで、

<div>開始日時：{formattedStart}</div>

// 開始日時：2022/09/29　と表示される

日付を操作するライブラリとしてdata-fns以外にもdayjs、moment.jsなどがあるらしいが、自分はdata-fnsを使いました。

date-fns - modern JavaScript date utility library