CODEWITHSUNDEEP
javascriptnode.jsreactjstypescriptreact-native
Karan Kumar
Karan Kumar

Reputation: 3186

React Typescript: Cannot assign component to element

I need to map my JSX component(FC) inside an object for dynamic rendering. This is what I have come up with so far:

Interface for Object

interface Mappings {
  EC2: {
    component: React.FC<{}>;
    name: string;
    description: string;
  };
}

export enum ResourcesEnum {
  EC2 = 'EC2',
  S3 = 'S3',
}

The mapping object defined in the same file:

enter image description here

Error message:

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

Thanks alot in advance!

Upvotes: 0

Views: 926

Answers (2)

Linda Paiste
Linda Paiste

Reputation: 42238

The type React.FC<{}> describes the component itself rather than an instance of the component. Mappings is expecting that your object contains component: EC2 instead of component: <EC2 />.

You either need to change your values to match your types or change your types to match your values. Either way is fine. If you want to keep component: <EC2 /> then your type needs to be component: JSX.Element.

Upvotes: 1

Yatin Gaikwad
Yatin Gaikwad

Reputation: 1200

You need to change the type of the component to JSX.Element or Element since <EC2 /> is JSX

interface Mappings {
  EC2: {
    component: JSX.Element;
    name: string;
    description: string;
  };
}

Upvotes: 1

Related Questions