[解決済み] Reactで保存したtextareaを改行で表示する

質問

Facebookの利用について React . 設定ページで、複数行の textarea があり、ユーザーが複数行のテキスト (私の場合はアドレス) を入力できます。

<textarea value={address} />

アドレスを表示させようとすると、だから何かというと {address} のように表示しようとすると、改行が表示されず、すべて1行になってしまいます。

<p>{address}</p>

これを解決するために何かアイデアはありますか？

どのように解決するのですか？

JSを使う理由はありません。改行をどのように処理するかは、ブラウザの white-space CSS プロパティで簡単に指定できます。

white-space: pre-line;

前行

空白の連続は折りたたまれます。行は 改行文字 <br> で、また行間を埋めるために必要な範囲で改行されます。

このデモをご覧ください。

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener('keypress', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>