Reactでmapの繰返しの時に空タグにkeyを設定する

はじめに

Reactでは map 等で繰返しをする時は、繰返しのルート要素に key 属性を設定し、そこに一意になる値を設定する必要がある。

しかし、次のように、繰返しのルート要素に空タグ（<>）を使う場合はkey が設定できない。ちなみに < key={i}> のような書き方はエラーになるのでNGだ。

<ul>
    {items.map((item, i) => (
        // without the `key` attribute, React will trigger a warning
        <>
            <li>Item1</li>
            {i === 1 && <li>Item1 SUb</li> }
        </>
    ))}
</ul>

スポンサーリンク

React.Fragment タグを使おう

上のケースのように、空タグに対してキーを設定する場合は、<React.Fragment> タグを使用する。

<ul>
    {items.map((item, i) => (
        // without the `key` attribute, React will trigger a warning
        <React.Fragment key={i}>
            <li>Item1</li>
            {i === 1 && <li>Item1 SUb</li> }
        </React.Fragment>
    ))}
</ul>