@kemkemG0 (kenshin)posted at 2020-11-20

Reactのjsx内で２重ループしたいんですが、、

Q&A

Closed

今、練習でブラウザで動くオセロを作ろうとしているのですが、8×8のコマ一つ一つを表示させるのにいい方法を知りたいです。
頑張ってforで配列に追加して、、とかやろうとしたんですがうまくいかなかったです。

以下のようなテーブルをいい感じに表示する方法を教えてくれると助かります！！

<tr>
    <td><Disc info={boardInfo(1, 0)} /></td>
    <td><Disc info={boardInfo(1, 1)} /></td>
    <td><Disc info={boardInfo(1, 2)} /></td>
    <td><Disc info={boardInfo(1, 3)} /></td>

</tr>

<tr>
    <td><Disc info={boardInfo(2, 0)} /></td>
    <td><Disc info={boardInfo(2, 1)} /></td>
    <td><Disc info={boardInfo(2, 2)} /></td>
    <td><Disc info={boardInfo(2, 3)} /></td>

</tr>

<tr>
       <td><Disc info={boardInfo(3, 0)} /></td>
       <td><Disc info={boardInfo(3, 1)} /></td>
       <td><Disc info={boardInfo(3, 2)} /></td>
       <td><Disc info={boardInfo(3, 3)} /></td>

</tr>

1Answer

@kemkemG0 posted at 2020-11-20

const DisplayBoard = props => {
const rows = [];
for (let i=0;i<8;i++) {
const columns = [];
for (let j=0;j<8;j++) {
columns.push(

);
}
rows.push({columns});
}
return (

{rows}

)
}

とコンポーネント化して解決しました
コンポーネント化せずになぜかダイレクトでやろうとして失敗してましたｗ反省

0Like

Are you sure you want to delete the question?

Reactのjsx内で２重ループしたいんですが、、

1Answer

Your answer might help someone💌