React, map, Tooltip

はじめに

Reactのmapで要素を繰り返す時、toogleイベントの呼び出しに困ったので、備忘録としてまとめたいと思います。

自分の場合はreactstrapのTooltipコンポーネントを利用していて、繰り返されている要素をクリックしそれぞれオーバーレイ表示をさせようとしていました。
ですが、クリックした時に、オーバーレイする部分が各要素と対応せず、意図した動きにはなりませんでした。

そして、試行錯誤した結果が以下です。

サンプルコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{posts.map((post, index) => {
return <div key={index}>
...
{/* マウスホバーで表示 */}
<div id={"overlay"+index}>No. {index}</div>
{/* オーバーレイ */}
<Tooltip isOpen={this.state.tooltipOpen[index]}
target={"overlay"+index} toggle={() => this.toggle(index)}>
<div>
...
</div>
</Tooltip>
</div>
})}

説明

Tooltipは表示させるための要素にidを与え、Tooltipタグにはtarget属性を与えることで各要素ごとの対応を取っています。
そのためidやtargetの値は一意でなくてはならず、mapで要素を繰り返す場合には上のコードのようにindexの値をくっつけるなどして工夫する必要があります。

1
2
3
4
// マウスホバーさせる要素
id={"overlay"+index}
// Tooltipタグ
target={"overlay"+index}

今回は以上になります。

web