reactで変数を改行表示したい

Question

下のような変数{row.category}の中身がmodelのように改行で表現されていたとき

これを<TableCell class='math'>{row.category}</TableCell>のUI側でもmodelと同じように改行をして表示させたいのですが調べても方法が出てきません
。どうすればいいのでしょうか？

<TableRow>
       <TableCell class='math'>{row.category}</TableCell>
        <TableCell class='moji'>abc</TableCell>      
</TableRow>

{row.category}の中身
123
456
789

表示させたい理想

　math　　　123　
　　　　    456
　　　　    789
  moji     abc

現在表示されている内容
math　　　123　456　789
moji     abc

改行ではなく空白として表示されてしまいました。

formでmodelにデータを格納するときにmultiline,rowsMaxなどで複数行の表現をして
改行しました。

Comments

[gentaro]

理想は良いんだけど、そもそも今はどう表示されてるのかぐらいは書こう

[退会済みユーザー]

ご返信ありがとうございます。修正しました
初心者で説明下手ですみません

[gentaro]

いや「初心者で」というのは言い訳がましいだけだから言わん方が良いですよ。
指摘しているのはプログラミングの能力とは無関係なコミュニケーションの問題でしかないので。

[退会済みユーザー]

そうっすね（笑）
今の高校の情報の先生に口調が似ていてびっくりです！
とりあえず、ぽい回答を自分でしておきました
ベストアンサーにしたいで＜br＞について回答していただければ幸いです

Answer 1

ようわからんけど、ふつうに<ul>を使って、見た目はCSSで好きなように整形すれば良いんでは。

import React from "react";
import "./styles.css";

export default function App() {
  const category = `123
456
789`;

  const categories = category.split("\n").map((i, x) => <li key={i}>{x}</li>);

  return (
    <div className="App">
      <div>
        <ul>{categories}</ul>
      </div>
    </div>
  );
}

Answer 2

改行表示の方法は

テキストエリアで囲う

<textarea>{row.category}</textarea>;

あるいはjavascriptで自分はよくやるsplit

 {row.category.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}

あとは、cssで(white-space: pre-line;)を使う方法もある

reactで<br>はできるんだっけか？