How do you type a generic list component? function List ({ items, render }: { items: T[]; render: (item: T) => React.ReactNode; }) { /* ... */ }

Declare a type parameter on the component function - TS infers T from items

Generics aren't supported in React components because of JSX syntax

Use React.FC , where T is the list item type

TypeScript · Middle · Question 22 of 75

How do you type a generic list component?

function List<T>({ items, render }: {
  items: T[];
  render: (item: T) => React.ReactNode;
}) { /* ... */ }

✓Correct answer: Declare a type parameter on the component function - TS infers T from items
2Generics aren't supported in React components because of JSX syntax
3Use React.FC<T>, where T is the list item type

Explanation

<List items={users} render={u => u.name} /> - T is inferred as User, and u in render is typed. In .tsx files, arrow functions use <T,> so the parser doesn't mistake it for JSX. React.FC doesn't pass generics through.

How do you type a generic list component?

Explanation

Further reading

Problem with a question

Test yourself