配列を返すコンポーネントの書き方

React では、1 つのコンポーネントから複数の要素を返す際に、配列として要素を並べることができます。通常は <div> や <section> などでラップする必要がありますが、フラグメントを使えば不要な DOM を増やさずに済みます。

シンプルな例：Fragmentを使う

import React from "react";

export const ListItemGroup = () => {
  return (
    <>

<li>りんご</li>

<li>ばなな</li>

<li>ぶどう</li>
    </>
  );
};

• <> と </> は React.Fragment の省略記法です。
• この例では `
  ` の中に `` を挿入できます。

<ul>
  <ListItemGroup />
</ul>

配列を直接返すパターン

要素に key を付ければ、配列そのものを直接 return することも可能です。

export const Fruits = () => {
  const items = ["りんご", "ばなな", "ぶどう"];
  return items.map((fruit, index) => (
    <li key={fruit}>{fruit}</li>
  ));
};

このようにすると <Fruits /> は <li> 要素の配列を返すコンポーネントになります。

注意点

• return で複数要素を返す場合、必ず key をつける（リストとしてレンダリングされる場合）。
• DOM 階層が崩れないように親要素（ulやdivなど）で適切に囲うこと。
• JSX 上ではトップレベルで複数要素を返すには Fragment か配列が必須。