React-tooltip: When tooltip on components that are destroyed, causes warning spam.

Created on 27 Jul 2016  路  13Comments  路  Source: wwayne/react-tooltip

I have two components with tooltips that get generated on each. If I then remove one of the later components, I start getting the following error many times a second when I hover over the remaining tooltip.

"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component."

I've traced it to something happening in your showTooltip function, I'm guessing you're iterating over non-existent children somehow?

Question

All 13 comments

I don't think it will iterate non-existent children, can you share me some of your code so that I can get a better view, because I'm not that clear what you mean "get generated on each"

I am also having this issue. I think it may be related to using data-tip=value, when I use data-tip-for and the <ReactTooltip> element for each instance I do not receive the error.

relevant jsx:

<div className='left'>
  <ReactTooltip place='bottom' effect='solid' />
   <a onClick={this.play} data-tip='Play'
         className={this.props.playing ? 'play hidden' : 'play'} />
   <a onClick={this.pause} data-tip='Pause'
         className={this.props.playing ? 'pause' : 'pause hidden'} />
    <a onClick={this.mute} data-tip='Mute'
         className={cn('mute', {hidden: this.props.muted})} />
    <a onClick={this.unmute} data-tip='Unmute'
         className={cn('unmute', {hidden: !this.props.muted})} />
    <input type='range' className={cn('volume', {hidden: !this.props.showVolume})}
               min='0' max='1' step='.01' value={this.props.volume}
                onChange={this.setVolume}/>
</div>

Could be, the ReactTooltip will bind event when componentDidMount, so if you leave the ReactTooltip and delete one of the target element, it will cause setState error when showTooltip. you can use for and id, also you can use ReactTooltip.rebuild() to rebind target elements after they update.

@wwayne I'm wondering if this issue may be deeper as in my example above I'm not deleting a target element, only changing the style to display:none; when not hovering over it's parent.

I'm think if this way is better https://github.com/wwayne/react-tooltip/issues/137, but you have to hide the element as well.

is it useful if there is an attribute disabled for controlling the tooltip?

having same problem over mapped element

@wwayne having same issue with react-dnd. ReactTooltip.rebuild() doesn't work.

@wwayne I also am having a problem with react-dnd and tooltips. I don't have warnings, rather chrome simply crashes. I found a mention in the dnd that it has problems with children having absolute coords.
See the link: https://github.com/react-dnd/react-dnd/issues/419

Looking for any suggestions how to fix this.

More info: I have a dnd component and IF I hover (I have a delay tooltip) and the toolitp displays the component drags fine, however if I DON'T show the tooltip first, it crashes the dnd component

@vbbartlett just use one tooltip otside component wrapped with DragDropContext.
I managed to save tooltips for my drag sources.

@vbbartlett I'm having the same issue and I also noticed that if I hover the component drags fine. Have you been able to find any solutions to this issue?

@brunzero, No I haven't been able to solve the issue. Ended up removing the tooltips. :(

Any progress on this issue? @pelhage and I are still experiencing this issue; really hoping we don't need to fully remove the tooltip...

Hey I also have this issue. It didn't prevent my app to work but send annoying error code. Beside, it show me two tooltip when this is happening.
capture du 2018-01-11 17-48-57

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Ganasist picture Ganasist  路  3Comments

abijames picture abijames  路  3Comments

Ericky14 picture Ericky14  路  3Comments

tanykim picture tanykim  路  4Comments

tonynd picture tonynd  路  3Comments