I am looping over a list and I want to add different tooltip text to different icons, but not exactly sure how to do it. Here's what I have so far:

          <React.Fragment key={sv.key}>
            <WedgeContainer>
              <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
                <Tooltip content="Hello">
              <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
              </Tooltip>
              </Button>
                { !!sv.count && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
              <Wedge />
            </WedgeContainer>
            <Spacer width="4rem" />
          </React.Fragment>
        ))}

And this is what I'm trying to achieve:

CodePudding user response：

You can create an array outside of your loop. In my example i'm using the index to access the items, but in your case you can be creative and do it the way it suits best.

const tooltipContent = [
   'tooltip1',
   'tooltip2',
   'tooltip3',
]   



<React.Fragment key={sv.key}>
        <WedgeContainer>
          <Button variant="icon" onClick={() => openView(sv)} disabled={sv.disabled || !item.canEdit}>
            <Tooltip content={tooltipContent[index]}>
          <Icon iconId={sv.iconId} size="medium" cursor="pointer" color={theme.font.color.primaryDark} />
          </Tooltip>
          </Button>
            { !!sv.count && (<Badge borderColor={theme.color.alert} color={theme.color.alert} top="-3rem" right="-1.5rem"  content={sv.count}/>) }
          <Wedge />
        </WedgeContainer>
        <Spacer width="4rem" />
      </React.Fragment>
    ))}

If the message is in one of your 'sv' items you can simply pass sv.x to tooltip content instead.