React & TypeScript usage of component passed via props

Question

I have a Sidebar component which passes unique icons into a SidebarRow child component via props.

import SidebarRow from './SidebarRow';
import {
    CogIcon,
    UsersIcon
} from '@heroicons/react/solid';

const Sidebar: React.FC = () => {
    return (
        <div className="p-2 mt-5 max-w-5xl xl:min-w-lg">
            <SidebarRow src="" title="Tom Mc" />
            <SidebarRow Icon={UsersIcon} title="Friends" />
            <SidebarRow Icon={CogIcon} title="Account" />
        </div>    
    )
}

export default Sidebar;

Within the SidebarRow component an interface defines the incoming props. Here I am attempting to conditionally render either an image or an Icon, depending on which is passed in.

import React from "react";

interface SidebarRowProps {
    src?: string
    Icon?: React.FC
    title: string
};

const SidebarRow: React.FC<SidebarRowProps> = ({ src, Icon, title }) => {
    return (
        <div className="">
            {src && (
                <img className="rounded-full" src={src} alt="" width="30" height="30" />            
            )}
            {Icon && (
                <Icon className="h-8 w-8 text-blue-500" />
            )}
            <p className="hidden sm:inline-flex font-medium">{title}</p>
        </div>    
    )
};

export default SidebarRow;

I am receiving the below error for the className attribute on the Icon component:

Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'className' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)
(JSX attribute) className: string

How can I define the Icon type so that the className property does not throw this error?

Thank you!

try this: Icon?: React.SVGProps<SVGSVGElement>, if found in the source code of your icon library this type, className does not exists on type React.FC — GregMit
– GregMit, Commented Jul 16, 2021 at 10:14
The Sidebar component then flags an error for the elements passed to Icon via props: Value of type '(props: SVGProps<SVGSVGElement>) => Element' has no properties in common with type 'SVGProps<SVGSVGElement>'. Did you mean to call it?ts(2560) Sidebar.tsx(11, 30): Did you mean to call this expression? (alias) function UsersIcon(props: React.ComponentProps<'svg'>): JSX.Element import UsersIcon — Tjm92
– Tjm92, Commented Jul 16, 2021 at 10:18
Thanks, here's a sandbox: codesandbox.io/s/hardcore-water-r4scl — Tjm92
– Tjm92, Commented Jul 16, 2021 at 10:27
Use React.ComponentType instead of React.FC. Example: Icon?: React.ComponentType<React.HtmlHTMLAttributes<HTMLElement>>. You can change React.HtmlHTMLAttributes<HTMLElement> to the Props Type of your Icon. — ninhjs.dev
– ninhjs.dev, Commented Jul 16, 2021 at 10:28

GregMit · Accepted Answer · 2021-07-16 10:44:56Z

10

The following code works fine

import React from "react";

interface SidebarRowProps {
    src?: string
    Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
    title: string
};

answered Jul 16, 2021 at 10:44

GregMit

5073 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dylan I · Accepted Answer · 2023-04-18 08:15:46Z

6

Heroicon types were changed in 2.0.17. Per regarding the icons type signature #981, the correct way to type icons is now one of

type Icon = React.FC<Parameters<typeof UsersIcon>[0]>

or

type IconSVGProps = React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & React.RefAttributes<SVGSVGElement>
type IconProps = IconSVGProps & {
      title?: string
      titleId?: string
 }

 type Icon = React.FC<IconProps>

answered Apr 18, 2023 at 8:15

Dylan I

3263 silver badges9 bronze badges

Collectives™ on Stack Overflow

React & TypeScript usage of component passed via props

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related