React Popover not closing

Question

I am new to React and trying to build a simple page using popovers (the page has n sections, each popover has different content, see projectContent array). I have 3 issues that must be related to the data being passed on from parent to child:

• The popover doesn't close on click out. I tried solutions like rootClose and trigger="focus" but it doesn't work.

• The Close button doesn't work.

• I get an error in the console telling me the Overlay Trigger component creates a ref that I won't be able to access. I don't really need a ref as the popover will go full screen.

    import React, { Component } from "react";
    import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
    import Popover from 'react-bootstrap/Popover';
    import Button from 'react-bootstrap/Button';
  
    const projectContent = [{id:1,title:'project-1',type:'html'},{id:2,title:'project-2',type:'motion'}]
  
    const PopoverComponent = ({myData}) => {
     return (
      <Popover title="Popover bottom">
         <Popover.Title as="h3">Popover right</Popover.Title>
         <Popover.Content>
            {myData.title}
            {myData.type}
            <Button key={myData.id} onClick={() => document.body.click()} >Close</Button>
         </Popover.Content>
      </Popover>
     )
  }
  
   class Home extends Component {
    render() {
     return (
      <div>
        <h2>List of projects</h2>
        {projectContent.map((item, index) => {
          return(
  
            <OverlayTrigger key={index} rootClose trigger="click" overlay={<PopoverComponent myData={item} />}>
              <button variant="success">{item.title}</button>
            </OverlayTrigger>
  
          )
        })}
       </div>
    );
   }
  }
  
  export default Home;
  

Answer 1

Your OverlayTrigger needs to pass a ref into your PopoverComponent, but PopoverComponent is not accepting refs, to solve this you can wrap your PopoverComponent with a forwardRef function and assign that ref to the root Popover:

const PopoverComponent = React.forwardRef(({ myData }, ref) => {
  return (
    <Popover title="Popover bottom" ref={ref}>
      <Popover.Title as="h3">Popover right</Popover.Title>
      <Popover.Content>
        {myData.title}
        {myData.type}
        <Button key={myData.id} onClick={() => document.body.click()}>
          Close
        </Button>
      </Popover.Content>
    </Popover>
  );
});