[React] 改行コード(\n)入り文字列のを適切に改行させて、表示させる方法

はじめに

業務で詰まったので自分の備忘録として残したいと思います

結論

CSSのwhite-space: 'pre-wrap'を使用する！

具体例

ダメな例

import { Box } from "@mui/material";

function App() {
    const message = "hello \nworld!";

    return <Box>{message}</Box>;
}

export default App;

結果

成功例

import { Box } from "@mui/material";

function App() {
    const message = "hello \nworld!";

                // ↓追記！
    return <Box sx={{ whiteSpace: "pre-wrap" }}>{message}</Box>;
}

export default App;

結果

最後に

いかがでしたでしょうか。
改行コードを挿入しただけだと、空白文字に変換されてしまうらしいです。
これが誰かの助けになれば嬉しいです。