JSXでのネストされたループの作成方法

1. ネストされたループを使用したマッピング: JSX内でネストされたループを作成する一般的な方法は、mapメソッドをネストして使用することです。以下のコード例を参考にしてください。

const data = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const NestedLoopExample = () => {
  return (
    <div>
      {data.map((row, rowIndex) => (
        <div key={rowIndex}>
          {row.map((cell, cellIndex) => (
            <span key={cellIndex}>{cell} </span>
          ))}
        </div>
      ))}
    </div>
  );
};

この例では、data配列内の各要素は行を表し、各行内の要素はセルを表します。最初のmapメソッドは各行に対して実行され、2番目のmapメソッドは各セルに対して実行されます。

2. 外部のmap関数と内部の別のコンポーネント: 外部のmap関数と内部の別のコンポーネントを使用して、ネストされたループを作成することもできます。以下のコード例を参考にしてください。

const data = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const Cell = ({ value }) => {
  return <span>{value} </span>;
};
const NestedLoopExample = () => {
  return (
    <div>
      {data.map((row, rowIndex) => (
        <div key={rowIndex}>
          {row.map((cell, cellIndex) => (
            <Cell key={cellIndex} value={cell} />
          ))}
        </div>
      ))}
    </div>
  );
};

この例では、Cellという別のコンポーネントを作成し、各セルの値を表示します。外部のmap関数は各行に対して実行され、内部のmap関数は各セルに対して実行されます。

これらの方法を使用することで、JSX内で簡単にネストされたループを作成できます。適切な方法を選択し、コードを読みやすく保つように心がけてください。