CODEWITHSUNDEEP
reactjstypescript
Tjm92
Tjm92

Reputation: 317

React & TypeScript usage of component passed via props

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!

Upvotes: 3

Views: 6020

Answers (2)

Dylan I
Dylan I

Reputation: 186

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>

Upvotes: 6

GregMit
GregMit

Reputation: 497

The following code works fine

import React from "react";

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

Upvotes: 10

Related Questions