React JSX の <pre> の中で改行したい

JSX で <pre> の内容を書いていてもそのままでは、改行が消えてしまいます。

function Pre() {
  return (
    <pre>
      Hoshimiya Ichigo
      Kirija Aoi
      Shibuki Ran
    </pre>
  );
}

👇出力: 改行は無視される

<pre>Hoshimiya Ichigo Kirija Aoi Shibuki Ran</pre>

JavaScript の Template literals `{}` を使う

JavaScript のテンプレート構文内では改行が生きになるので、JSX内でもこれを利用すればOK

function Pre() {
  return (
    <pre>{`
Hoshimiya Ichigo
Kirija Aoi
Shibuki Ran
    `}</pre>
  );
}

👇出力

<pre>

Hoshimiya Ichigo
Kirija Aoi
Shibuki Ran

</pre>

前後に改行入ってしまってるけど、JSXの <pre> 内で改行させることができました！

sample

See the Pen JSX <pre> new line test by KIKIKI (@kikiki_kiki) on CodePen.

　
完

---

[参考]

• Template literals (Template strings) - JavaScript | MDN
• JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ - かもメモ

1万円起業 文庫版

これは開業