Search code examples
javascriptreactjsreactstrap

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

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

Solution

  • 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)}`

...