Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefHolder which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here

[Nondukishor]

import {FaUserCircle,FaRegEnvelope} from 'react-icons/fa';
import { Popover, OverlayTrigger,Nav,Card } from 'react-bootstrap';
import avatar from '../../assets/image/user-avatar.jpg';
import { Link } from 'react-router-dom';

const PopoverCustom =(
<Popover id={`popover-positioned-bottom`}>
  <Card  className="text-center" style={{width:'15rem'}}>
     <Card.Header>
         <Card.Img variant="top" style={{height:100,width:100}} src={avatar}/>
     </Card.Header>

     <Card.Footer>
         <Nav>
             <Nav.Item className="d-flex flex-column">
                 <Link to={'/#!'}>Profile</Link>
                 <Link to={'/#!'}>Settings</Link>
                 <Link to={'/#!'}>Login</Link>
                 <Link to={'/#!'}>Register</Link>
                 <Link to={'/#!'}>Logout</Link>
             </Nav.Item>
         </Nav>
     </Card.Footer>
  </Card>
</Popover>);




const ToolTip =()=>{

const toolTips =[
    {
    position:'bottom',
    Icon:FaUserCircle,
    prover:PopoverCustom
   },
    {
    position:'bottom',
    Icon:FaRegEnvelope,
    prover:PopoverCustom
   }
]
    return(
    <Fragment>
    {toolTips.map((Tool,index) => (
    <OverlayTrigger
      trigger="click"
      key={index}
      placement={Tool.position}
      overlay={Tool.prover}
    >
      <Tool.Icon/>
    </OverlayTrigger>
  ))}
   </Fragment>)
}

export default ToolTip;```



```index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefHolder which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in svg (created by Context.Consumer)
    in IconBase (created by FaUserCircle)
    in FaUserCircle (at ToolTip/index.js:54)
    in RefHolder (created by OverlayTrigger)
    in OverlayTrigger (at ToolTip/index.js:48)
    in ToolTip (at TopNav/index.js:30)
    in div (created by ForwardRef)
    in ForwardRef (created by Nav)
    in Nav (at TopNav/index.js:29)
    in div (created by Context.Consumer)
    in Transition (created by Collapse)
    in Collapse (created by Context.Consumer)
    in NavbarCollapse (at TopNav/index.js:23)
    in nav (created by Navbar)
    in Navbar (at TopNav/index.js:14)
    in TopNav (at MainContainer.js:13)
    in MainContainer (at Home.js:9)
    in Home (created by Context.Consumer)
    in Route (at Routes.js:8)
    in Switch (at Routes.js:7)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Routes.js:6)
    in Routes (at App.js:3)
    in App (at src/index.js:16)
    in ApolloProvider (at src/index.js:15)
    in Provider (at src/index.js:14)
    in StrictMode (at src/index.js:13)```

[taion]

We need to add support for something like nodeRef like in RTG

[taion]

Would be happy to take a PR analogous to https://github.com/reactjs/react-transition-group/pull/559

[pzaczkiewicz-athenahealth]

Given that react-overlays is deprecated, I've re-created this issue in @restart/ui: https://github.com/react-restart/ui/issues/93