Add generic type in function component

Question

I have the next code:

interface Interface<T> {
    submit: T,
    children: (ctx: { test: string, info: string }) => React.ReactNode | ReactElement;
}


const Test: React.FC<Interface<T>> = ({submit, children}) => {

    return (
        <div>
            {children({test: '123', info: '3'})}
        </div>
    )
}

How to add T here <Interface<T>?

Titian Cernicova-Dragomir · Accepted Answer · 2022-10-10 10:25:57Z

3

React.FC can't be used to define a generic component. Fortunately, you don't really need React.FC, you can just make the function generic ands specify the type of the props on the parameter:


const Test = <T,>({submit, children}: Interface<T>) => {

    return (
        <div>
            {children({test: '123', info: '3'})}
        </div>
    )
}

Playground Link

answered Oct 10, 2022 at 10:25

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

1 Comment

Asking Over a year ago

could you please help here stackoverflow.com/questions/74474194/…

Collectives™ on Stack Overflow

Add generic type in function component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related