props from server to client component are undefined
Answered
West African Crocodile posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
West African CrocodileOP
Hello, everyone
I have the following server component, which is a page.tsx file, i fetch succesfully data passing
The thing is that that component is getting undefined props and I dont understand why.
I have the following server component, which is a page.tsx file, i fetch succesfully data passing
params.id
to my fetcher, and I would then pass it to WidgetSelection
which is a client
component.The thing is that that component is getting undefined props and I dont understand why.
export default async function Dashboard({
params,
}: {
params: { id: string };
}) {
const { name, zone, layout } = await getDashboard(params.id);
return (
<DashboardProvider>
<div className="rounded-md w-full relative p-2">
<div className="bg-white p-2 rounded-md shadow-md">
<Breadcrumb name={name} zone={zone} />
<div className="my-4 flex justify-between">
<span className="underline text-xl font-bold decoration-gray-300 underline-offset-8">
{name}
</span>
<div className="flex gap-4">
<button className="px-2 rounded-md transition-colors py-1 bg-gray-200 shadow-sm hover:bg-gray-100">
Cancel
</button>
<span className="inline-block w-[1px] h-full bg-gray-300 mx-0.5" />
<CreateWidgetButton />
<EditButton />
</div>
</div>
</div>
<DashboardContent layout={layout} />
</div>
<WidgetSelection dashboardId={params.id} />
</DashboardProvider>
);
Answered by Rafael Almeida
out of curiosity, if you store the ID in a local variable and use it instead, does it work?
15 Replies
![Avatar](https://cdn.discordapp.com/avatars/694749037160824902/95960a6c36e52e168a16b7f6543b819f.webp?size=256)
Dayo
what do you get when you console.log params? and is your Dashboard a dynamic page?
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
West African CrocodileOP
![Image](https://cdn.discordapp.com/attachments/1136692207441694794/1136718189137506446/image.png)
here is the structure i'm using atm, as of the params i get the id as for the [id] folder path
and that works fine
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
out of curiosity, if you store the ID in a local variable and use it instead, does it work?
Answer
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
also can you share the code of the
WidgetSelection
component? specifically how you are reading the prop![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
West African CrocodileOP
"use client";
import React from "react";
import { useDashboardContext } from "../context/dashboard-context";
import { XMarkIcon } from "@heroicons/react/24/outline";
import Searchbar from "@/components/Searchbar";
import Link from "next/link";
import { cn } from "@/utils/utils";
const WidgetSelection = ({ dashboardId }: { dashboardId: string }) => {
const { createWidgetMode, toggleCreateWidgetMode } = useDashboardContext();
return (
<div
className={cn(
"fixed bottom-0 right-0 z-40 h-full w-96 border-l border-l-gray-300 bg-white p-4",
{
hidden: !createWidgetMode,
},
)}
>
<div className="mb-2 flex items-center justify-between">
<h2 className="text-xl font-bold">Widgets</h2>
<button onClick={toggleCreateWidgetMode}>
<XMarkIcon className="h-8 w-8" />
</button>
</div>
<p className="font-extralight">Add a widget to your dashboard</p>
<div className="my-4 flex gap-2">
<button className="w-fit rounded-md border border-gray-300 bg-gray-100 px-4 py-2 transition-colors hover:bg-fuchsia-300 hover:text-purple-500">
<span className="text-center">KPI</span>
</button>
<button className="w-fit rounded-md border border-gray-300 bg-gray-100 px-4 py-2 transition-colors hover:bg-fuchsia-300 hover:text-purple-500">
<span className="text-center">Metrics</span>
</button>
<button className="w-fit rounded-md border border-gray-300 bg-gray-100 px-4 py-2 transition-colors hover:bg-fuchsia-300 hover:text-purple-500">
<span className="text-center">Objectives</span>
</button>
</div>
<Searchbar />
{...}
</div>
);
};
export default WidgetSelection;
this is the component, ill try storing the variable as u said and let u know
@Rafael Almeida storing a local variable works!
but I really think that this is not so intuitive
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
yeah this sounds like a bug, there is something changing the values of the
params
prop before Next collects the props to send to the client component and since its an object the changes propagate and are used when it is finally read![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
West African CrocodileOP
should we tag someone from the dev team here?
oh sorry didnt saw u were an admin
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
I will create an issue in the repo so they can track it there
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
West African CrocodileOP
perfect!