Reactで<br/>を使用せずに改行する

#背景

Reactのアプリケーションで、バックエンドから改行を含む文字列を変数で受け取って、フロントエンドで改行させる方法を調べていたら様々な方法があったので個人的にお気に入りな方法をまとめておく。

#実装方法

sample.tsx

import "./styles.css";

export default function App() {
  const val: string = {バックエンドから取得する処理};
  return (
    <div className="App">
      <h1 className="text">{val}</h1>
    </div>
  );
}

styles.css

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

#参考記事
https://zenn.dev/kanasugi/articles/b0547f5ae1f522