react-restart / ui

MIT License
132 stars 22 forks source link

Nav example with Dropdown gives error #83

Closed ggilley closed 11 months ago

ggilley commented 1 year ago

Describe the bug

I was trying to do a navbar with a dropdown menu as one of the items. I followed the example on the docs page, but I get an error:

const NavLink = React.forwardRef(
  ({ href, disabled, children, onClick }, ref) => {
    const [navItemProps, meta] = useNavItem({
      key: href,
      onClick,
      disabled,
    });

    return (
      <a
        ref={ref}
        href={href}
        {...navItemProps}
        className={clsx(
          "py-3 px-4 rounded",
          disabled && "opacity-50 cursor-not-allowed",
          meta.isActive
            ? "bg-primary !text-white"
            : "hover:text-primary hover:bg-gray-200"
        )}
      >
        {children}
      </a>
    );
  }
);

function Example() {
  const [activeKey, setActiveKey] = useState("/home");

  return (
    <Nav
      className="flex"
      activeKey={activeKey}
      onSelect={setActiveKey}
    >
      <NavLink href="/home">Home</NavLink>

      <NavLink href="/about">About</NavLink>

      <NavLink href="orderd" disabled>
        Orders
      </NavLink>
      <Dropdown>
        <Dropdown.Toggle as={NavLink}>More</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item eventKey="4.1">
            Action
          </Dropdown.Item>
          <Dropdown.Item eventKey="4.2">
            Another action
          </Dropdown.Item>
          <Dropdown.Item eventKey="4.3">
            Something else here
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </Nav>
  );
}
ntime.mjs:4 TypeError: children is not a function
    at DropdownMenu (DropdownMenu.js:101:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)

When I look at the standalone dropdown examples, they show a function for the child. What am I missing?

Thanks!