React + TypeScriptでテーブルを作りたい

Question

React、TypeScript練習中のものです。

なんの工夫もないただの
テーブルを生成しようとしていますが、
うまくいっておりません。

現状、下記のような感じで、
「この型はpush使えませんよ！」と言った感じの
エラーが出ております。

ここで質問ですが、
・tbodyの型は間違っていますか？また、tbody,tr,tdの型はなんでしょうか？
・そもそもこの方法は合っているのでしょうか？

const makeTable: React.FC<Props> = () => {
    let tbody:HTMLTableSectionElement = document.createElement("tbody");

    for(let i:number = 0; i < 5; i++){
        tbody.push(
            <tr>
                <td>{i}行目</td>
                <td>眠い眠い</td>
            </tr>
        );
    }

    return(
            <table>
                <thead>
                    <tr>
                        <th>行数</th>
                        <th>状態</th>
                    </tr>
                </thead>
                {tbody}
            </table>
        </div>
    )

}

以上、よろしくお願いします。

Comments

[maisumakun]

> 「この型はpush使えませんよ！」と言った感じの
エラーが出ております。

エラーメッセージはむやみに要約せず、「コピペで」提示していただけるとありがたいです。

[taro_bird]

ご回答ありがとうございます。
Property 'push' does not exist on type 'HTMLTableSectionElement'
というエラーが出ております。

Answer 1

構成としてはやはりrowの型を定義して、rowのリストをpropsで受け取りmapで表示するのがベストかと思います。
たとえば、

interface RowType {
  id: string  // この辺の型はご自由に
  state: string
}

type Props {
 rows: RowType[]
}
const makeTable: VFC<Props> = ({rows}: Props) => (
  <table>
    <thead>
      <tr>
        <th>行数</th>
        <th>状態</th>
      </tr>
    </thead>
    <tbody>
      {rows.map((row, idx) => (
        <tr key={row.id}>
          <td>{idx}行目</td>
          <td>{row.state}</td>
        </tr>
      )}
    </tbody>
  </table>
) 

Answer 2

※TypeScritpではなくJavaScriptのコードですが
案1)

const Table = () => {
	return (
		<table>
			<thead>
				<tr>
					<th>行数</th>
					<th>状態</th>
				</tr>
			</thead>
			<tbody>
				{[...Array(5).keys()].map((i) => {
					return (
					<tr key={i}>
						<td>{i}</td>
						<td>眠い</td>
					</tr>
					)
				})}
			</tbody>
		</table>
	)
}

案2)

const Table = () => {
    const tbody = [];
    for(let i = 0; i < 5; i++){
        tbody.push(
            <tr key={i}>
                <td>{i}行目</td>
                <td>眠い眠い</td>
            </tr>
        );
    }

	return (
		<table>
			<thead>
				<tr>
					<th>行数</th>
					<th>状態</th>
				</tr>
			</thead>
			<tbody>
				{tbody}
			</tbody>
		</table>
	)
}

Comments

[taro_bird]

とりあえず型をつけてpushするという
発想が無しであることがわかりました。

そしてこの書き方がしっくりくるので
ベストアンサーとさせていただきます。
ありがとうございました。

Answer 3

そもそも論として、React内でdocument.createElementを行うのは適当ではありません。JSXに<tbody>を書いて、その中身をmapで生成するような形で進めてください。

Comments

[taro_bird]

ご返答ありがとうございます。

mapで書くと

const indexes:number[] = [0, 1, 2, 3, 4];
と
const make_tr = (num: number) => {
return (
<tr>
<td>{num}回</td>
<td>{calc(num)}</td>
</tr>
)
}

というものを用意して
return は
<tbody>
{indexes.map(index => make_tr(index))}
</tbody>

このようになります。

正直、最初はこうしていたのですが、
indexesという配列を用意するのが
変で仕方ありませんでした。

こうするしかないのでしょうか？