props from server to client component are undefined

[stark token]

Hello, everyone

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>
  );

[coral hawk]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[ornate siren]

what do you get when you console.log params? and is your Dashboard a dynamic page?

[stark token]

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

props from server to client component are undefined

[blissful orbit]

out of curiosity, if you store the ID in a local variable and use it instead, does it work?

also can you share the code of the WidgetSelection component? specifically how you are reading the prop

[stark token]

"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

@blissful orbit storing a local variable works!

but I really think that this is not so intuitive

[blissful orbit]

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

[stark token]

should we tag someone from the dev team here?

oh sorry didnt saw u were an admin

[blissful orbit]

I will create an issue in the repo so they can track it there

[stark token]

perfect!