【React】改行コード\n入り文字列を改行して表示する

はじめに

APIアクセスで返ってきたエラーメッセージに改行コード\nが入っているとき、そのままメッセージを出力しても改行が反映されていませんでした。
\nを<br>に変換すればええんやろ！と思っていたら、<br>がただの文字列として出力されただけでした。
問題解決に少々詰まったのでメモとして残します。

問題点

改行コード入りのメッセージを出力しても改行が反映されない。

export const Body = () => {
  const body =
    'ユニコーンガンダム\nクスィーガンダム\nガンダムF91\nクロスボーンガンダムX1';

  return (
    <div>
      {body}
    </div>
  );
};

解決策

<br>タグをJSXで認識できる形にします。
メッセージを改行コード\nで分割して配列にし、mapメソッドで配列をループすることで<br>を含んだJSX要素を返すようにします。

export const Body = () => {
  const body =
    'ユニコーンガンダム\nクスィーガンダム\nガンダムF91\nクロスボーンガンダムX1';

  return (
    <div>
      <MultiLineBody body={body} />
    </div>
  );
};

const MultiLineBody = ({ body }: { body: string }) => {
  const texts = body.split('\n').map((item, index) => {
    return (
      <React.Fragment key={index}>
        {item}
        <br />
      </React.Fragment>
    );
  });
  return <div>{texts}</div>;
};

以下のように改行コードが反映されるようになります。

参考資料