経験知ロゴ

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

react ループ

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>
          );
      })}
)

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから