Reactstrap Tooltip throws target could not be identified in the dom error with dynamic IDs

Question

I had a perfectly working custom Reactstrap Tooltip component that I use in my forms. However, I recently discovered that there was a target ID clash if I use the same name property more than once, which causes some Tooltips to not show up.

Therefore, I decided to append a random string to the tooltip in order to get unique IDs like this:

// instead of just `Tooltip-${name}`, I use `Math.random()`:
const tooltipId = `Tooltip-${name}-${Math.random().toString(36).substr(2, 5)}`;

I then use the tooltipId constant I just created as an id and target.

However, this generates the following error as soon as the user hovers over the (i) icon:

The target 'Tooltip-tp1-27tha' could not be identified in the dom, tip: check spelling

Can anyone explain why is this only happening when generating a random ID?

Here is a sandbox to demonstrate the issue: https://codesandbox.io/s/fast-shape-thj00?file=/src/CustomTooltip.jsx

had this issue and solved from the following answer https://stackoverflow.com/a/68636620/4342108 — Mustafa J, Aug 03 '21 at 13:07

score 3 · Accepted Answer · answered May 24 '20 at 19:31

3

Create your tooltipId on creation of the component and not in the render method. Because the state changes, it is re-rendered and therefore has a new tooltipid.

class CustomTooltip extends Component {
  tooltipId = `Tooltip-${this.props.name}-${Math.random().toString(36).substr(2, 5)}`

...

answered May 24 '20 at 19:31

max

310
1
6

1

Thanks, I figured that out, but I still don't understand why the state changes? Is it `Math.random()` that triggers a re-render? – Bassem May 24 '20 at 19:44
No, the `tooltipOpen` in state changes on hover, so that's why it re-renders – max May 24 '20 at 19:46
1

Right, spot on – Bassem May 24 '20 at 19:52

Reactstrap Tooltip throws target could not be identified in the dom error with dynamic IDs

1 Answers1