Generics and API Data

type ListProps<T> = {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
};

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>;
}

const users = <List items={[{ id: 1, name: 'Asha' }]} renderItem={(u) => u.name} />; // u is typed automatically

type Product = { id: number; title: string; price: number };

async function getProducts(): Promise<Product[]> {
  const res = await fetch('/api/products');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  return res.json() as Promise<Product[]>;
}