firebaseで改行したテキストフィールドを登録する

目的

• 改行コードを処理して。。。という必要があるかと思っていたら、ほぼ何もしなくても実現できた
• この方法について検索して情報を見つけることができなかったため、残す

サンプル

• 入力側

          <TextField
            id="filled-multiline-flexible"
            fullWidth
            label="本文"
            onChange={(e) => setdiscription(() => e.target.value)}
            multiline
            maxRows={20}
            variant="standard"
            placeholder=""
            value={discription}
            error={discription == ""}
            helperText={discription == "" && "本文が未入力です"}
            sx={{ marginTop: 1 }}
          />

以下の部分で複数行を設定可能にする

            multiline
            maxRows={20}
            variant="standard"

このインプットで cloud storeへ登録すると、次のように登録される。一見、改行コードが飛んでしまったように見えるが、改行コードは入っている

• 出力側

<div style={{ whiteSpace: 'pre-line' }}>
    {firebaseから取得した項目}
</div>

• 特に改行コードをいじる等の処理はなし

参考