React-tooltip doesn't show on conditional render

Question

react-tooltip is awesome, but I'm running into issues with a conditionally rendered component.

I have a refresh icon that only shows when props.refreshImages is true:

Topbar.js

import React from 'react'

export default function Topbar (props) {
  return (
    <div>
      {props.refreshImages && 
      <i data-tip="Refresh the images" className="fas fa-sync-alt" ></i>}
    </div>
  )
}

App.js

import React from 'react'
import Topbar from './Topbar'
import ReactTooltip from 'react-tooltip'

export default function App() {
  return (
    <ReactTooltip />
    <Topbar refreshImages={true}/>
  )
}

Simplified example. But when the refresh icon is hidden and shown again (props.refreshImages is false and then true) the tooltips don't display.

I've already tried moving <ReactTooltip /> into Topbar.js and running ReactTooltip.rebuild() on every render, none have worked. For props.refreshImages I'm actually using Redux.

Thanks in advance for the help.

Answer 1

You need to rebuild your tooltips with ReactTooltip.rebuild post a render and not before it.

Assuming you are using functional components with hooks, you can do so with useEffect hooks

export default function App(props) {
  useEffect(() => {
      ReactTooltip.rebuild();
  }, [props.refreshImages])
  return (
    <ReactTooltip />
    <Topbar refreshImages={props.refreshImages}/>
  )
}

or with a class component you would write the logic in componentDidUpdate

 componentDidUpdate(prevProps) {
    if(prevProps.showItem !== this.props.showItem) {
      ReactTooltip.rebuild();
    }
  }

Sample demo