CODEWITHSUNDEEP
reactjstypescriptreact-hooks
sohinim98
sohinim98

Reputation: 92

Typescript Compilation Error with React - Type 'Element' is not assignable to type 'FunctionComponent<{}>'

The original code used -

import { Create } from '@material-ui/icons';

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={Create}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

And this is the interface -

export default interface DroppableFolderProps {
  count?: number;
  folderId: string;
  label?: Label;
  Icon?: React.ComponentType;
  name?: string;
  type: LinkType;
  url: string;
  sidebarOpen?: boolean;
}

On replacing Icon={Create} with this React functional component,

const DraftIcon = <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={DraftIcon}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

I get this error - 

type 'Element' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
    Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.

for the line Icon={DraftIcon}.

Any suggestions?

Upvotes: 1

Views: 2502

Answers (1)

Z-Debub
Z-Debub

Reputation: 36

Try this, change the Icon property in DroppableFolderProps to type IconProps

interface DroppableFolderProps{
  Icon:IconProps
}

Change the const DraftIcon to a functional component

const DraftIcon = ()=> <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

And pass the DraftIcon to the DroppableFolderProps component

<DroppableFolder Icon={ <DraftIcon/> } />

Upvotes: 2

Related Questions