Using Popover for multiple items

[gregbia]

I'm implementing the Popover component in a block. The block has an array of items and when I click on an item, a Popover should appear below it.

As an example, say I'm rendering multiple social network icons. When the user clicks on an icon, a Popover should appear below it, containing options for that icon.

Case 1: When used in a loop, multiple Popovers appear all at once for each item.

<div>
items.map( ( item, index ) => (
   <div onClick={() => { setAttributes({  isVisible: ! isVisible }) }}>
      /* An icon here */
   </div>
   { isVisible && (
      <Popover position="bottom center">
          Popover is toggled! 
       </Popover>
   ) }
) )
</div>

Case 2: When the Popover is outside the loop it appears once, which is what I what but positioned center to the parent div instead the item clicked on.

<div>
items.map( ( item, index ) => (
   <div onClick={() => { setAttributes({  isVisible: ! isVisible }) }}>
      /* An icon here */
   </div>
) )
{ isVisible && (
    <Popover position="bottom center">
        Popover is toggled! 
     </Popover>
) }
</div>

What is the proper way to use the Popover component for multiple items?

[swissspidy]

I think the main problem here is that you are using the same isVisible attribute for all items. So if you click on one item, isVisible is set to true, therefore displaying the popover for every item.

Why not set isVisible to index, e.g. something like this:

<div>
items.map( ( item, index ) => (
   <div onClick={() => { setAttributes({  isVisible: false === isVisible ? index : false }) }}>
      /* An icon here */
   </div>
   { isVisible === index && (
      <Popover position="bottom center">
          Popover is toggled! 
       </Popover>
   ) }
) )
</div>

[designsimply]

Closing since it appears an answer was provided. Thank you!