Reactのreturnでループを書く時、divで囲わずkeyを設定する方法

Reactのrender内のJSXで、ループを書く時はループごとのまとまりにkeyを指定しなければなりません。

ループがdivなどでひとくくりになっていたら一番外側のタグにkeyを指定すれば良いのですが、複数のDOMがそのまま複数並んでいる場合はそのままではkeyを指定できません。

keyをつけるためにわざわざdivで囲むのもよろしくないしデザインの崩れにも繋がります。

このような時、フラグメントを使うことで追加のDOMを加えることなくループをかけます。

書き方はこのように<React.Fragment>で囲うだけでOKで、描画時<React.Fragment>は消えるのでDOMは綺麗なままです。

<React.Fragment key="id">
  <div></div>
  <div></div>
</React.Fragment>

returnでループする時はこんな感じ。

return (
      {data.map((key) => {
        return (
          <React.Fragment key={key.id}>
            <label>{key.name}</label>
            <input value="{key.value}" />
          </React.Fragment>
          );
      })}
)