React & TypeScript: Create a reusable List component using generic
Tags: typescript, react, tutorial, webdev
Published: 2023-01-09 12:26:56

In this example, the List component is a function component that accepts props of type ListProps<T>. The ListProps interface includes an items array of type T and a renderItem function that takes an item of type T and returns a JSX element.

```react
//Generic List Example
import React from "react";

interface ListProps<T> {
  items: T[];
  //Render the list items
  renderItem: (item: T) => React.ReactNode; //Or JSX.Element
}

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

export default List;
```
In the List component's type definition, the `<T extends {}>`
syntax is used to specify a type parameter called T. Type parameters are used to create generic types in TypeScript, which allow you to define a type that can work with a variety of different types.

The extends {} part of the type parameter definition specifies that the T type parameter must be a subtype of the empty object type {}. This means that it can be any type except for null or undefined.

Using a type parameter in this way allows you to create a generic component that can accept a variety of different types for the items and renderItem props. This can make the component more reusable and flexible, as it can be used with different types of data.

```react
interface Customer {
  id: string;
  name: string;
  email: string;
}

const customers: Customer[] = [
  { id: "1", name: "John Smith", email: "john@example.com" },
  { id: "2", name: "Jane Doe", email: "jane@example.com" },
  { id: "3", name: "Bob Johnson", email: "bob@example.com" },
];

const renderCustomer = (customer: Customer) => {
  return (
    <div>
      <h3>{customer.name}</h3>
      <p>{customer.email}</p>
    </div>
  );
};

interface Order {
  id: string;
  customer: string;
  items: string[];
  total: number;
}

const orders: Order[] = [
  {
    id: "1",
    customer: "John Smith",
    items: ["Item 1", "Item 2"],
    total: 29.99,
  },
  { id: "2", customer: "Jane Doe", items: ["Item 3", "Item 4"], total: 39.99 },
  {
    id: "3",
    customer: "Bob Johnson",
    items: ["Item 5", "Item 6"],
    total: 49.99,
  },
];

const renderOrder = (order: Order) => {
  return (
    <div>
      <h3>{order.customer}</h3>
      <ul>
        {order.items.map((item) => (
          <li key={Math.random() * 100}>{item}</li>
        ))}
      </ul>
      <p>Total: ${order.total}</p>
    </div>
  );
};

function App(): JSX.Element {
  return (
    <div>
      <List items={customers} renderItem={renderCustomer} />
      <List items={orders} renderItem={renderOrder} />
    </div>
  );
}
```
**
Why use generic list component function in react?**

Using a generic component function in React can be useful when you want to create a component that can be used with a variety of different types of data. By using a type parameter, you can create a component that is flexible and reusable, as it can be used with different types of data without having to create separate components for each type.

I hope this helps! Let me know if you have any questions or need further assistance.