Next.js Discord

Discord Forum

Client component weird warning

Answered
Mini Rex posted this in #help-forum
Open in Discord
Mini RexOP
"use client"

export default function StatCard({
    title,
    stats,
    fullStats,
    open,
    handleClick
}: StatCardProps) {
    return (
        <div onClick={handleClick} className="hover:cursor-pointer">
            <div className={`flex items-center justify-between p-2 bg-secondary-bg min-h-15 ${open ? "rounded-t-sm" : "rounded-sm"}`}>
                <div>
                    {title}
                </div>
                <div className="flex gap-6">
                    {stats}
                </div>
                <MenuIcon />
            </div>
            <div className={`bg-secondary-bg rounded-b-sm p-4 ${open ? "block" : "hidden"}`}>
                {open && <BarSeperator />}
                {fullStats}
            </div>
        </div>
    )
}


i get this message
Props must be serializable for components in the "use client" entry file. "handleClick" is a function that's not a Server Action. Rename "handleClick" either to "action" or have its name end with "Action" e.g. "handleClickAction" to indicate it is a Server Action.

Any way to fix this annoyance
Answered by American black bear
just remove "use client"
View full answer

25 Replies

Mini RexOP
so i just remove use client
since the parent is a client component
@Mini Rex since the parent is a client component
Sun bear
handleClick needs to be a server action
As you’re using it on the users client
Mini RexOP
well yes since i need usestate for opening and closing an element
@Mini Rex well yes since i need usestate for opening and closing an element
Sun bear
Correct. Are you importing handle click or is that in the same file
Mini RexOP
it's in the same file as the parent
Sun bear
Could you share handleClick please
Mini RexOP
handleClick={() => setOpen(!open)}
here is my current parent
"use client"

export default function BedwarsStatCard({ stats }: { stats?: BedwarsStats }) {
    const [open, setOpen] = useState(false)

    if (!stats) return null

    return (
        <StatCard
            title="Bedwars"
            stats={
                <>
                    <StatCardStat title="Level" value={`[${getLevelForExp(stats.Experience).toFixed(0)}]`} />
                    <StatCardStat title="WS" value={stats.winstreak ? stats.winstreak.toString() : "?"} />
                    <StatCardStat title="KD" value="100" />
                    <StatCardStat title="FKD" value="100" />
                    <StatCardStat title="WL" value="100" />
                    <StatCardStat title="BBL" value="100" />
                </>
            }
            fullStats={
                <h1>
                    Hello
                </h1>
            }
            open={open}
            handleClick={() => setOpen(!open)}
        />
    )
}
Mini RexOP
set the openstate
which shows the fullStats component
American black bear
just remove "use client"
Answer
American black bear
it exists to show a boundary between RSCand client component
@American black bear just remove `"use client"`
Sun bear
No he’s doing client action
American black bear
i know
you should mark a component use client only if the parent element is a server component
@American black bear you should mark a component `use client` only if the parent element is a server component
Sun bear
Yeah but it doesn’t really make a difference
Mini RexOP
i mean removing use client removes the nuscence
Sun bear
Huh ??
How did that work
Behavior isn’t changed