Error: useSidebarItemContext should be used within the SidebarItemContext provider!

[valerius21]

Describe the bug
I'm getting the in the title mentioned error while using the example code. Browsing the code, it looks alright to me.

To Reproduce
Steps to reproduce the behavior:

1. Create a new component
2. use the following code

import { Sidebar } from 'flowbite-react'

const TemplateSidebarNavigation = () => {
  return (
    <div>
      <h2>{'TemplateSidebarNavigation'}</h2>
      <Sidebar aria-label="Test DB">
        <Sidebar.Items>
          <Sidebar.Item href="#">Dashboard</Sidebar.Item>
        </Sidebar.Items>
      </Sidebar>
    </div>
  )
}

export default TemplateSidebarNavigation

3. See error

Expected behavior
The component should render without any errors.

Screenshots

System information:

• Device: PC
• Resolution: 1440p
• OS: Windows 11
• Browser: Chrome
• Version: latest

Project information:

• Tailwind: ^3.1.4
• Flowbite: ^1.4.7
• Flowbite React: ^0.1.3
• Type: Redwoodjs with React 18.2.0

[ValTM]

You need the correct structure:

<Sidebar aria-label="sidebar">
  <Logo />
  <Sidebar.Items>
    <Sidebar.ItemGroup>
      <Sidebar.Item icon={Home} href="/">Dashboard</Sidebar.Item>
      <Sidebar.Item href="page2">Page 2</Sidebar.Item>
    </Sidebar.ItemGroup>
  </Sidebar.Items>
</Sidebar>

Without the Sidebar.ItemGroup it throws the same error.

[rluders]

@valerius21 can you confirm that the solution above works?

[valerius21]

@rluders Thank you for the response. I'll retry everything again when RedwoodJS finishes the React 18 upgrade officially. I did not see it initially. redwoodjs/redwood#4992