Function PopoverItem

stories/examples/Popover/Multi.js:6–36

(props)

import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

function PopoverItem(props) {
  const { id, item } = props;
  const [popoverOpen, setPopoverOpen] = useState(false);

  const toggle = () => setPopoverOpen(!popoverOpen);

  return (
    <>
      <Button
        className="me-1"
        color="secondary"
        id={'Popover-' + id}
        type="button"
      >
        {item.text}
      </Button>
      <Popover
        placement={item.placement}
        isOpen={popoverOpen}
        target={'Popover-' + id}
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </PopoverBody>
      </Popover>
    </>
  );
}

function PopoverExampleMulti(props) {
  return (