Next.js Discord

Discord Forum

Having trouble getting useState working to create a responsive sidebar

Answered
Cesky Terrier posted this in #help-forum
Open in Discord
Avatar
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.

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
View full answer

17 Replies

Avatar
Dayo
what does your SidebarContentDashboard look like? is it a server/client component?
Avatar
Cesky TerrierOP
Sorry, should have added that:

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
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
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
Avatar
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
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
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
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 sidebarcontentdashboard
oh 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
Dayo
lmao was literally going to ask you what it looks like
Avatar
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
Dayo
means it's a server component and you can't directly import it into a client component
Answer
Avatar
Cesky TerrierOP
Yep, gonna work on making modifications to it, thank you so much, your help is really appreciated