DesignRevision / shards-react

⚛️A beautiful and modern React design system.
https://designrevision.com/downloads/shards-react/
MIT License
757 stars 97 forks source link

Getting warning with <Popover /> component #44

Open Lesleyvdp opened 3 years ago

Lesleyvdp commented 3 years ago

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>
</>

react version: 17.0.1 react-dom version: 17.0.1 shards-react version: 1.0.3

Note: Everything does work the way it's supposed to, except I wouldn't expect a warning to be thrown.