Having trouble getting useState working to create a responsive sidebar
Answered
Cesky Terrier posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
Quick note: I'm very new to React/ts etc so please bare with m ðŸ™ðŸ»
Basically, I've created a sidebar component that I'm trying to add function to. I'm following a tutorial on it here: https://www.youtube.com/watch?v=NFrFhBJPTmI
I'm at the point where to add onClick statements to make the sidebar responsive and to shrink down, however I'm facing issues with useState.
So with this, I add "use client"; to my sidebar component, but when I click the button that triggers the expansion, I get the following error:
So I guess from this point I'm kinda stuck in a loop..
I've added both the main sidebar component and page file in this gist: https://gist.github.com/tommerty/d291f7fb5f0ad56c134651078bc7e6f0
Basically, I've created a sidebar component that I'm trying to add function to. I'm following a tutorial on it here: https://www.youtube.com/watch?v=NFrFhBJPTmI
I'm at the point where to add onClick statements to make the sidebar responsive and to shrink down, however I'm facing issues with useState.
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
So with this, I add "use client"; to my sidebar component, but when I click the button that triggers the expansion, I get the following error:
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding'use client'
to a module that was originally written for the server.
So I guess from this point I'm kinda stuck in a loop..
I've added both the main sidebar component and page file in this gist: https://gist.github.com/tommerty/d291f7fb5f0ad56c134651078bc7e6f0
Answered by Dayo
means it's a server component and you can't directly import it into a client component
17 Replies
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
what does your SidebarContentDashboard look like? is it a server/client component?
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
Sorry, should have added that:
I'll update the gist also
import { SidebarItem } from "@/lib/components/dashboard/Sidebar2/sidebar";
import { BiSolidDashboard, BiSolidChart, BiSolidPaintRoll, BiSolidCog, BiSolidCategoryAlt, BiSolidUserCircle, BiSolidLogInCircle } from "react-icons/bi";
export async function SidebarContentDashboard({ user }: any) {
return (
<>
<SidebarItem url={"/dashboard"} icon={<BiSolidDashboard size={20} />} text="Dashboard" active />
<SidebarItem url={"/dashboard/stats"} icon={<BiSolidChart size={20} />} text="Statistics" />
<SidebarItem url={"/dashboard/customize"} icon={<BiSolidPaintRoll size={20} />} text="Customize" />
<SidebarItem url={"/dashboard/authors"} icon={<BiSolidUserCircle size={20} />} text="Authors" />
<SidebarItem url={"/dashboard/settings"} icon={<BiSolidCog size={20} />} text="Blog Settings" />
<SidebarItem url={"/dashboard/categories"} icon={<BiSolidCategoryAlt size={20} />} text="Blog Categories" />
</>
);
}
I'll update the gist also
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
i think the issue is with the SidebarItem. even though it doesn't use any state/interactivity, but it's inside the Sidebar component which has been marked as a client component
(use client)
.try moving
SidebarItem
into a separate file![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
Just moved sidebar item into a new file and updated my import.
Commented on the gist to not muddy up the thread with code: https://gist.github.com/tommerty/d291f7fb5f0ad56c134651078bc7e6f0?permalink_comment_id=4648976#gistcomment-4648976
Commented on the gist to not muddy up the thread with code: https://gist.github.com/tommerty/d291f7fb5f0ad56c134651078bc7e6f0?permalink_comment_id=4648976#gistcomment-4648976
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
My confusion is that the page.tsx is a server component, but calling in client components which I thought was ok, so I'm not sure why I can't specify
use client
inside a component to be loaded on a server component/page![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
if that didn't fix it try temporarily removing some of the libs you imported in the page.tsx file. not all libraries support RSC atm
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
gonna try on a fresh page instead just because removing some of those is sure to cause headaches lol. Bear with me for a few, and btw thanks for the help you're offering!
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
import Sidebar from "@/lib/components/dashboard/Sidebar2/sidebar";
import SidebarContentDashboard from "@/lib/components/dashboard/Sidebar2/content-dashboard";
const Sidebartest = () => (
<>
<div className="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
<div className="drawer-content items-center justify-center">
{/* main content */}
<div className="">test</div>
<div className="max-w-4xl mx-auto" />
<label htmlFor="my-drawer-2" className="btn btn-primary drawer-button lg:hidden">
Open drawer
</label>
</div>
<div className="drawer-side">
<label htmlFor="my-drawer-2" className="drawer-overlay"></label>
<div className="w-auto text-base-content">
{/* sidebar */}
<Sidebar>
<SidebarContentDashboard />
</Sidebar>
<div />
</div>
</div>
</div>
</>
);
export default Sidebartest;
Created this page, error still occurs when I click the button on the sidebar component.
Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding'use client'
to a module that was originally written for the server.
What's funny is that there is no
async/await
in this page.tsx, sidebar.tsx, sidebarItem or sidebarcontentdashboardoh wait
I think I found it!
I believe my UserDropDown component is the culprit I just removed it from the sidebar.tsx and the chevron is changing!
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
lmao was literally going to ask you what it looks like
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
Still getting used to these components in components in components lol, I know I'll be better off once I learn it, still just a tricky thing until that point lol
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
means it's a server component and you can't directly import it into a client component
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Cesky TerrierOP
Yep, gonna work on making modifications to it, thank you so much, your help is really appreciated