Reactstrap tooltip causes an error: The target 'TooltipExample' could not be identified in the dom

Question

I have following the code example regarding tooltips in Reactstrap:

constructor(props) {
  super(props);
  this.state = {
    tooltipOpen: true
  };
}
.
.
.
render() {
  return (
    <div>
      <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
      <Tooltip 
        placement="right" 
        isOpen={this.state.tooltipOpen} 
        target="TooltipExample" 
        toggle={this.toggle}>
        Hello world!
      </Tooltip>
    </div>
  ) 
}

And I'm getting the following error:

Error: The target 'TooltipExample' could not be identified in the dom, tip: check spelling

Everything works ok if the initial state is tooltipOpen: false. But I would like the tooltip to appear when the user loads the page...

What should I do?

Answer 1

Since the introduction of React Hooks this error can be avoided using the following approach.

import React, { useRef } from 'react'
import { UncontrolledTooltip } from 'reactstrap'

const ToolTipExample = () => {

    const ref = useRef(null)

    return (
        <div >
            <p ref={ref}>Hello World</p>
            <UncontrolledTooltip target={ref}>
                Tooltip message goes here :D
            </UncontrolledTooltip>
        </div>
    )
}

This will also work with the Tooltip component.

Answer 2

In constructor, tooltipOpen should be false.

And then, in componentDidMount, switch tooltipOpen from false to true

This is code:

constructor(props) {
  super(props);
  this.state = {
    tooltipOpen: false,
  };
}

componentDidMount() {
  this.setState({
    tooltipOpen: true,
  });
}