CODEWITHSUNDEEP
typescriptreact-typescript
Kat freestyle
Kat freestyle

Reputation: 1

Understanding React.FC in Typescript

I've been trying to understand how the React.FC type works and tried multiple things this being the only one that works:

import React from 'react'
    
    type iProps<P = {}> = {
        (props: P): React.ReactElement<any, any>
    }
    
    interface IPropsTest {
        name: string,
        age: number
    }
    
    const MyComponent: iProps<IPropsTest> = ({ name, age }) => {
        return <div>{name} {age}</div>
    }

Could someone explain this part

type iProps<P = {}> = {
    (props: P): React.ReactElement<any, any>
}

Why do I need <P = {}> and why do I have to put (props: P)

Upvotes: 0

Views: 250

Answers (1)

basarat
basarat

Reputation: 275819

What is P = {}

This is a generic default. If the generic argument is not provided then P is assumed to be {}.

Why do I have to put (props: P)

This means the function can be expected to be called with one argument of type P.

Upvotes: 1

Related Questions