closing react bootstrap popOver component from a button that is inside the popover

Question

How do i close a react bootstrap popover component in a react functional component? currently i am using a hack that closes the popover using the rootclose method and calling body.click on the button inside, however i feel this is not ideal, is there any way or method in the react bootstrap component or maybe by using refs with which i can achieve this?

**************following is how my component is structured right now *****

const setVisibility = (
<Popover id="popover-basic">
      <Popover.Body className="px-0">
        //code here
      </Popover.Body>
    </Popover>
  );

  const EditVisibility = () => (
    <OverlayTrigger
      trigger="click"
      placement="bottom-end"
      overlay={setVisibility}
      rootClose
    >
      //code here
    </OverlayTrigger>
  );

and then I'm calling the EditVisibility component in the return method of my react functional component

Answer 1

Please look into the folling sandbox: https://codesandbox.io/s/close-popover-ytpze2

• Introduce a show state to make the Popover controlled.
• In Popover.Header you can define a closer button and set the show state to false on click
• Write a callback function which toggle the Popover on button click ("onToggle" property of OverlayTrigger)