Generic arrow function component with inteface "Cannot find name 'T'"

Question

I got an error when I'm trying to write a generic arrow function (see code below) :


interface AutocompleteModalProps<T> {
  isVisible: boolean;
  searchMethod: (value: string) => T;
  renderItem: (item: T) => ReactNode;
  children: ReactNode;
}


// Error on the 'T' => "Cannot find name 'T'"

const AutocompleteModal: React.FC<AutocompleteModalProps<T>> = ({
  isVisible,
  children,
  renderItem,
  searchMethod,
}) => {
...
};

The "function" way is working, but I have to transform it to an arrow function...


function OldWay<T>({
  isVisible,
  searchMethod,
  renderItem,
  children,
}: AutocompleteModalProps<T>) {

Does this answer your question? [What is the syntax for Typescript arrow functions with generics?](https://stackoverflow.com/questions/32308370/what-is-the-syntax-for-typescript-arrow-functions-with-generics) — Sulthan, Feb 23 '22 at 10:45
I already seen this post, but it doesn't really cover what i would like to achieve — PierreDuv, Feb 23 '22 at 10:47
Have you seen this? https://stackoverflow.com/questions/56835492/error19-35-ts2304-cannot-find-name-t-why-i-cant-extend-interface-in-ts - it does work if you create a concrete interface: https://codesandbox.io/s/typescript-forked-718ro2 — TomS, Feb 23 '22 at 13:53
This answer from another post worked for me: https://stackoverflow.com/a/61957066/8662476 — Maurici Abad, Dec 08 '22 at 18:30

score 0 · Answer 1 · answered Feb 23 '22 at 14:05

0

I find a way to do it

const AutocompleteModal: React.FC<AutocompleteModalProps<unknown>> = <T,>({
  isVisible,
  children,
  renderItem,
  searchMethod,
}) => {
...
};

answered Feb 23 '22 at 14:05

PierreDuv

104
1
8

Generic arrow function component with inteface "Cannot find name 'T'"

1 Answers1