Next.js Discord

Discord Forum

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking

Answered
American Staffordshire Terrier posted this in #help-forum
Open in Discord
American Staffordshire TerrierOP
i want to pass react-icons as a props to another react element. But here, the error says Functions cannot be passed directly to Client Components unless you explicitly expose it by marking
"use server";

import { IconType } from "react-icons";
import React, { ReactElement } from "react";
import { Kategori } from "@prisma/client";

export async function IconLayout({
  icon,
  kategori,
}: {
  icon: React.ReactElement<any>;
  kategori: Kategori | null;
}) {
  return (
    <div>
      {React.cloneElement(icon, {
        color: kategori ? kategori.warna : "gray",
        size: 30,
      })}
    </div>
  );
}


async function Header({ habit }: { habit: HabitType }) {
  const kategori = await getHabitKategori(habit.kategoriId);

  const kategoriIcons = [
    {
      name: "Hobi",
      component: IoGameControllerOutline,
    },
    {
      name: "Olahraga",
      component: MdSportsMartialArts,
    },
    {
      name: "Pekerjaan",
      component: MdWorkOutline,
    },
    {
      name: "Kesehatan",
      component: TiPlus,
    },
  ];

  const selectedIcon = kategoriIcons.find((val) => val.name === kategori?.nama);
  const iconComponent = selectedIcon ? selectedIcon.component : null;

  return (
    <div className="flex justify-between items-center">
      <div className="flex flex-col">
        <span>{habit.nama}</span>
        <span className="text-green-500 text-sm">{kategori?.nama}</span>
      </div>
      {kategoriIcons.find((val) => val.name === kategori?.nama)?.component}
      <IconLayout key={kategori?.id} icon={iconComponent} kategori={kategori} />
    </div>
  );
}
Answered by Ray
try comment out this line
{kategoriIcons.find((val) => val.name === kategori?.nama)?.component}
View full answer

21 Replies

@American Staffordshire Terrier i want to pass react-icons as a props to another react element. But here, the error says `Functions cannot be passed directly to Client Components unless you explicitly expose it by marking` ts "use server"; import { IconType } from "react-icons"; import React, { ReactElement } from "react"; import { Kategori } from "@prisma/client"; export async function IconLayout({ icon, kategori, }: { icon: React.ReactElement<any>; kategori: Kategori | null; }) { return ( <div> {React.cloneElement(icon, { color: kategori ? kategori.warna : "gray", size: 30, })} </div> ); } ts async function Header({ habit }: { habit: HabitType }) { const kategori = await getHabitKategori(habit.kategoriId); const kategoriIcons = [ { name: "Hobi", component: IoGameControllerOutline, }, { name: "Olahraga", component: MdSportsMartialArts, }, { name: "Pekerjaan", component: MdWorkOutline, }, { name: "Kesehatan", component: TiPlus, }, ]; const selectedIcon = kategoriIcons.find((val) => val.name === kategori?.nama); const iconComponent = selectedIcon ? selectedIcon.component : null; return ( <div className="flex justify-between items-center"> <div className="flex flex-col"> <span>{habit.nama}</span> <span className="text-green-500 text-sm">{kategori?.nama}</span> </div> {kategoriIcons.find((val) => val.name === kategori?.nama)?.component} <IconLayout key={kategori?.id} icon={iconComponent} kategori={kategori} /> </div> ); }
Ray
try this
import { IconType } from "react-icons";
import { Kategori } from "@prisma/client";

export async function IconLayout({
  Icon,
  kategori,
}: {
  Icon: IconType;
  kategori: Kategori | null;
}) {
  return (
    <Icon size={30} style={{ color: kategori ? kategori.warna : "gray" }} />
  );
}
@Ray try this ts import { IconType } from "react-icons"; import { Kategori } from "@prisma/client"; export async function IconLayout({ Icon, kategori, }: { Icon: IconType; kategori: Kategori | null; }) { return ( <Icon size={30} style={{ color: kategori ? kategori.warna : "gray" }} /> ); }
American Staffordshire TerrierOP
still, now there are two errors
- Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (from browser)
- Type 'string | null' is not assignable to type 'Color | undefined'.
  Type 'null' is not assignable to type 'Color | undefined'.ts(2322) (from vscode)

export async function IconLayout({
  Icon,
  kategori,
}: {
  Icon: IconType;
  kategori: Kategori | null;
}) {
  return <Icon style={{ color: kategori ? kategori?.warna : "gray" }} />;
}

async function Header({ habit }: { habit: HabitType }) {
  const kategori = await getHabitKategori(habit.kategoriId);

  const kategoriIcons = [
    {
      name: "Hobi",
      component: IoGameControllerOutline,
    },
    {
      name: "Olahraga",
      component: MdSportsMartialArts,
    },
    {
      name: "Pekerjaan",
      component: MdWorkOutline,
    },
    {
      name: "Kesehatan",
      component: TiPlus,
    },
  ];

  const selectedIcon = kategoriIcons.find((val) => val.name === kategori?.nama);
  const iconComponent = selectedIcon ? selectedIcon.component : null;

  return (
    <div className="flex justify-between items-center">
      <div className="flex flex-col">
        <span>{habit.nama}</span>
        <span className="text-green-500 text-sm">{kategori?.nama}</span>
      </div>
      {kategoriIcons.find((val) => val.name === kategori?.nama)?.component}
      <IconLayout key={kategori?.id} Icon={iconComponent} kategori={kategori} />
    </div>
  );
}
there is no "use client" something. but the error says that. i think its a bug
Ray
try comment out this line
{kategoriIcons.find((val) => val.name === kategori?.nama)?.component}
Answer
American Staffordshire TerrierOP
wow it works
Ray
and change this
export async function IconLayout({
  Icon,
  kategori,
}: {
  Icon: IconType;
  kategori: Kategori | null;
}) {
  return <Icon style={{ color: kategori?.warna || "gray" }} />;
}
American Staffordshire TerrierOP
thats incredible. thanks so much
@Ray what you wanna do with this code?
American Staffordshire TerrierOP
it was like 2 or 3 hours ago, my first try. and im so frustated
Ray
ah ok
so everything works now?
American Staffordshire TerrierOP
everything works very well
Ray
cool, please mark solution
American Staffordshire TerrierOP
howw?
Ray
right click the answer > application > mark solution
you got it👍🏾
@Ray try comment out this line `{kategoriIcons.find((val) => val.name === kategori?.nama)?.component}`
American Staffordshire TerrierOP
there is no error about that code before. and its hard to track down.
even though im using typescript
Ray
typescript doesn't know react 😆
American Staffordshire TerrierOP
but react has its typescript support so t though
Ray
yes it knows the types but don't know how to use and how it works😂