Can't access .rebuild() static method when using functional components

[NathZ1]

Hi everyone,

I am struggling to refresh tooltips with my conditional content. I know i need to rebuild after the content is updated, but I can't access the .rebuild() method...

In the past with functional components I would create a reference to the component to access its methods, but this does not work in this case. Please see below example -

import { useState, useRef } from "react" 
import ReactTooltip from 'react-tooltip'

const Component1 = () => {
  return <p key='component1' data-tip='Test tool-tip 1'>hover over me 1</p>
}

const Component2 = () => {
  return <p key='component2' data-tip='Test tool-tip 2'>hover over me 2</p>
}

//will show tool-tip on first load, but not after the renderComponent is toggled off then on again
export default function Main() {
  const [ currentComponent, setComponent ] = useState<JSX.Element>(Component1)
  const [ renderComponent, setRenderComponent ] = useState<boolean>(true)
  const tooltipComponentRef = useRef<ReactTooltip>(null) 

  function cycleComponentClick() {
    if (currentComponent.props.children === "hover over me 1") {
      setComponent(Component2)
    }
    else {
      setComponent(Component1)
    }
  }

  function toggleRenderComponent() {
    setRenderComponent(!renderComponent)
  }

  //tooltipComponentRef.current?.rebuild() //gives error: "Property 'rebuild' does not exist on type 'ReactTooltip'..."

  return (
    <div>
      <button onClick={cycleComponentClick}>Cycle Component</button>
      <button onClick={toggleRenderComponent}>Toggle Render Component</button>
      {renderComponent ? currentComponent : null}
      <ReactTooltip ref={tooltipComponentRef} />
    </div>
  );
}

Is this considered a bug or is there a work-around to help with the issue?

Thanks in advance

[stevenKirill]

It seems you should use data-for attribute for dom node (your component) and dynamically change ID prop for ReactTooltip component then it will match data-for === id and will re render when you hover for different components. It is not unusual case tho

[berkaygurbuz]

It happened to me also. In readme there is an information about that.

1. Import node_modules/react-tooltip/dist/index.js into your page.
2. Make sure react and react-dom into your page.

You can read whole documentation here