Next.js Discord

Discord Forum

props from server to client component are undefined

Answered
West African Crocodile posted this in #help-forum
Open in Discord
Avatar
West African CrocodileOP
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>
  );
Answered by Rafael Almeida
out of curiosity, if you store the ID in a local variable and use it instead, does it work?
View full answer

15 Replies

Avatar
what do you get when you console.log params? and is your Dashboard a dynamic page?
Avatar
West African CrocodileOP
Image
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
out of curiosity, if you store the ID in a local variable and use it instead, does it work?
Answer
Avatar
also can you share the code of the WidgetSelection component? specifically how you are reading the prop
Avatar
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
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
West African CrocodileOP
should we tag someone from the dev team here?
oh sorry didnt saw u were an admin
Avatar
I will create an issue in the repo so they can track it there
Avatar
West African CrocodileOP
perfect!