Firestoreから取得した値を改行して表示させたい

firestoreにstringの値を保存→取得・表示すると、デフォルトでは改行が反映（表示）されない。

• textareaにて値（改行あり）を入力
• firestoreに保存
• その後、データを取得し画面上に表示する
  ⭐️ この時、改行を含めて表示したい

Firestoreから取得した値に、改行を表示させる方法

Firestore に textarea の入力値を保存すると、JavaScript の JSON.stringify() によって \n が \\n にエスケープされることがあります。

そのため、Firestore から取得したデータを画面上で正しく表示するには下記の対応が必要。

• replaceAll('\\n', '\n') で \n を元の改行に戻す
• whitespace-pre-wrap を適用して、改行を正しく表示する

<div className='whitespace-pre-wrap'>{message.replaceAll('\\n', '\n')}</div>

※Tailwindを使わない場合は下記のCSSを記述する。

.whitespace-pre-wrap {
  white-space: pre-wrap;
}