Reputation: 11496
I'm creating a component that takes an arbitrary list of values and a transformer that will render a specific value. The values can be of any type, as the rendering is handler by the transformer, but the compiler is complaining about the generics parameter.
Here is a minimal example:
interface MyListParams<T> {
values: T[];
transformer: (value: T) => JSX.Element
}
export const MyList: React.FunctionComponent<MyListParam<T>> = ({
}) => <>
{values.map(transformer)}
</>
This code gives me the error Cannot find name 'T'.
in code React.FunctionComponent<MyListParam<T>>
.
I do realize that I have to tell typescript that this function is using generics, but I fail to find the correct place to do so.
Upvotes: 0
Views: 964
Reputation: 10662
I don't think there's a way to pass a type
to the component when using React.FC
, so you can try:
interface MyListParams<T> {
values: T[];
transformer: (value: T) => JSX.Element;
}
const MyList = <T extends object>(props: PropsWithChildren<MyListParams<T>>) => <></>;
Upvotes: 2
Reputation: 53994
The generics is on the interface - meaning you want to reuse the interface.
In your example you are using the interface so you need to specify its type:
// T is string
export const MyList: React.FunctionComponent<MyListParams<string>> = ({
values, transformer
}) => <>{values.map(transformer)}</>
If the generics on the function see official examples (not a real use case in function component).
Upvotes: 0