How to pass a component as a prop using Next 13

Question

I have a client component called Tab:

import * as React from "react";
import type { IconType } from "react-icons";

type TabProps = {
  Icon: IconType;
  label: string;
  isActive?: boolean;
};


export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon size={20} />
      {label}
    </div>
  );
}

Whenever I try to use this component, I get this error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Ok. I have tried wrapping the component passed via Icon in a function that makes use of "use server" but Next is asking me to enable some experimental flag to make use of the directive.

Is there some way to achieve what I want without going through all of this? I know this was possible in old react. Do I need to declare the Icons as client components prior to using them or is there a better solution?

Seems duplicated question - https://stackoverflow.com/questions/76267974/pass-react-icon-as-props-to-client-component-in-nextjs — gz89, Jul 04 '23 at 18:16

Gasanov · Accepted Answer · 2023-07-05T07:36:20.213

You can't pass a component from server component to a client component, as it needs to be serializable.

But you can use Slot approach. In your Tab.tsx:

import React from "react";

type TabProps = {
  Icon: React.ReactElement;
  label: string;
  isActive?: boolean;
};


export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon.type {...Icon.props} size={20}/>
      {label}
    </div>
  );
}

Your parent component:

<Tab Icon={<Icon/>}/>

How to pass a component as a prop using Next 13

1 Answers1