React & TypeScript: Create a reusable List component using generic

In this example, the List component is a function component that accepts props of type ListProps. 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.

//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.

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.

Blog

React & TypeScript: Create a reusable List component using generic

Elham Najeebullah

Join Our Newsletter. No Spam, Only the good stuff.

Related