CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Daniel Calderon Mori
Daniel Calderon Mori

Reputation: 5796

React - How can I wrap and element depending on a boolean parameter?

I'm using react-bootstrap tooltip to build a react component. According to react-boostrap specifications, I need to wrap my element with an OverlayTrigger element, like this:

<OverlayTrigger overlay={this.getTooltipElement()} placement='left'>
   //element
</OverlayTrigger>

This works just fine, but my component requires to show the tooltip when hovered (usual behavior) AND only if a boolean variable is set to true. I've tried this:

if (booleanParameter) {
    return (<OverlayTrigger overlay={this.getTooltipElement()} placement='left'>
       {myElementVariable};
    </OverlayTrigger>)
} else {
    return myElementVariable;
}

But when the tooltip is instructed to show (by the boolean parameter), I get the following warning:

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.

Important: getTooltipElement() uses component state fields.

... and the component starts to act erratically. How should I go to solve my problem? How can I wrap and element depending on a boolean parameter? Is there another, less elaborated solution?

Upvotes: 2

Views: 622

Answers (1)

Vladimir Rovensky
Vladimir Rovensky

Reputation: 4704

I believe the approach you are using is fine, the warning essentially tells you that somewhere - possibly in whatever getTooltipElement() returns, you're calling setState after the component unmounted. You fix this by checking whether the component is still mounted before you set the state:

if(this.isMounted())
  this.setState({...});

By the way, if you give your components a 'displayName' attribute, the warning will actually tell you in which component it happened, making it easier to find.

Upvotes: 1

Related Questions