Generic List Component

import React from 'react';
import { ListItemProps } from './ListItem';

export type ListComponent<T = {}> = React.FC<ListItemProps<T>>;


export interface SelectProps<T>{
  items: T[];
  darkMode: boolean;
  loading: boolean;
  itemComponent: ListComponent<T>;
  onItemClick: (item: T) => void;
}

const List = <T extends object>(props: SelectProps<T>) => {
  
  const { items, darkMode, loading, itemComponent: ItemComponent, onItemClick } = props;

  return (
    <>
      {items.map((item: T, idx: number)=> {
        return (
          <ItemComponent darkMode = {darkMode} loading= {loading} key={idx} value={item} onItemClick={onItemClick} />
        );
      })}
    </>
  );
}

export default List;

Generic List Implementation

<List items = {savedJobs} itemComponent = {ListItem} darkMode = {darkMode} loading= {loading} onItemClick={(item: any) => console.log('Clicked on a list item: ', item)} />

Generic List Item Component

import React from 'react';

export interface ListItemProps<T> {
  value: T;
  darkMode: boolean;
  loading: boolean;
  onItemClick: (item: T) => void;
}

const ListItem = <T extends object>({ value, darkMode, loading, onItemClick }: ListItemProps<T>) => {

  return (
    <div className = "List-item" onClick = {() => onItemClick(value)} style = {{ height: "80px", background: '#f00', margin: "10px 0" }}>
    </div>
  );
}

export default ListItem;