I'm using the Popover component the way it is described by the documentation except it is throwing a warning in the console.
The warning:
Warning: Invalid value for prop toggle on
tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
at div
at div
at InnerPopper (webpack-internal:///./node_modules/react-popper/lib/esm/Popper.js:52:35)
at Popper (webpack-internal:///./node_modules/react-popper/lib/esm/Popper.js:216:31)
at div
at PopperManager (webpack-internal:///./node_modules/shards-react/dist/shards-react.es.js:5626:5)
at Popover (webpack-internal:///./node_modules/shards-react/dist/shards-react.es.js:5857:5)
at InformationPopover (webpack-internal:///./components/Navbar/InformationPopover/InformationPopover.tsx:17:21)
The code I'm using:
<>
<Button id="nav-toggle-popover" onClick={togglePopover}>
Info
</Button>
<Popover placement="bottom" target="#nav-toggle-popover" toggle={togglePopover} open={isOpen}>
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>How the app works</PopoverBody>
</Popover>
</>
I'm using the
Popover
component the way it is described by the documentation except it is throwing a warning in the console.The warning: