Cannot get props in nextjs app router passed from server page to client component

Question

I am using app router with Nextjs v13.5 I have a /dashboard page (server component) and ApiKeyOption client component inside it. When I pass props from dashboard page to ApiKeyOption component, I am getting undefined.

Here is /dashboard page:

import ApiKeyOptions from "@/components/client-compoents/ApiKeyOptions";
import KeyStatics from "@/components/client-compoents/KeyStatics";
import RequestApiKey from "@/components/client-compoents/RequestApiKey";
import authoptions from "@/lib/authOptions";
import { db } from "@/lib/db/db";
import { getServerSession } from "next-auth";
import React from "react";

const page = async () => {
  const session = await getServerSession(authoptions);
  const apiKey = await db.apiKey.findFirst({
    where: {
      userId: session?.user.id,
      enabled: true,
    },
  });

  return (
    <section className="container mt-24 sm:px-16 ">
      <div className="flex w-full justify-between items-center">
        <h2>
          Howdy, <span className="font-medium">{session?.user.name} ?</span>
        </h2>
        <img
          src={session?.user.image!}
          alt={session?.user.name as string}
          width={45}
          height={45}
          referrerPolicy="no-referrer"
          className="border-2 border-solid border-slate-500 p-[2px] rounded-full"
        />
      </div>
      {apiKey && (
        <div className="flex items-center gap-x-4 mt-2">
          <h2 className="font-light text-sm p-2 bg-[rgba(0,0,0,0.15)] w-fit rounded-md">
            {apiKey?.key}
          </h2>
          <ApiKeyOptions key={"whatever"} />
        </div>
      )}
      <div className="flex justify-center mt-6">
        {apiKey ? <KeyStatics /> : <RequestApiKey />}
      </div>
    </section>
  );
};

export default page;**

**And ApiKeyOptions client component:

"use client";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { DotsVerticalIcon } from "@radix-ui/react-icons";
import { useToast } from "../ui/use-toast";

export default function ApiKeyOptions({ key }: { key: string }) {
  console.log(key);
  const { toast } = useToast();

  function copyText(text: string) {
    navigator.clipboard.writeText(text);
    toast({
      description: "Copied to clipboard.",
    });
  }
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <DotsVerticalIcon className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40 dark:bg-slate-700 text-left">
        <Button
          variant="ghost"
          className="block w-full hover:dark:bg-slate-800 text-left"
          // onClick={() => copyText(key)}
        >
          Copy
        </Button>
        <DropdownMenuSeparator />
        <Button
          variant="ghost"
          className="block w-full hover:dark:bg-slate-800 text-left"
        >
          Revoke
        </Button>
        <DropdownMenuSeparator />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

I have tried to destructure the props and it is also not working. All of other stuffs are working properly and I am not getting errors too. I am just getting key props as undefined.

Answer 1

After researching a lot I found that key is reserved word. Using different prop name solved the issue.