Add generic type in function component-CodePudding

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>?

CodePudding user response：

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