davidgilbertson

const Select = <IdType extends string>(props: {
  options: Array<{
    id: IdType;
    name: string;
  }>;
  selectedItemId?: IdType;
  onSelect: (id: IdType) => void;
}) => (
  <select
    value={props.selectedItemId ?? ''}

davidgilbertson

<Select
  onSelect={id => {
    // Do something with id
  }}
  options={[
    {id: Size.Small, name: 'Small'},
    {id: Size.Medium, name: 'Medium'},
    {id: Size.Large, name: 'Large'},
  ]}
/>

davidgilbertson

<Select<Size>
  onSelect={id => {
    // Do something with id
  }}
>
  <option value={Size.Small}>Small</option>
  <option value={Size.Medium}>Medium</option>
  <option value={Size.Large}>Large</option>
</Select>

davidgilbertson

<Select
  onSelect={id => {
    // Do something with id
  }}
>
  <option value={Size.Small}>Small</option>
  <option value={Size.Medium}>Medium</option>
  <option value={Size.Large}>Large</option>
</Select>

davidgilbertson

const List = <ItemType extends {id: string}>(props: {
  items: ItemType[];
  renderItem: (item: ItemType) => React.ReactNode;
}) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{props.renderItem(item)}</li>
    ))}
  </ul>
);

davidgilbertson

const List = <ItemType extends any>(props: {
  items: ItemType[]; 
  renderItem: (item: ItemType) => React.ReactNode};
) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{props.renderItem(item)}</li>
    ))}
  </ul>
);

davidgilbertson

const List = <ItemType extends any>(props: {
  items: ItemType[];
  renderItem: (item: ItemType) => React.ReactNode;
}) => (
  <>{props.items.map(props.renderItem)}</>
);

davidgilbertson

const List = (props: {
  items: any[];
  renderItem: (item: any) => React.ReactNode;
}) => (
  <>{props.items.map(props.renderItem)}</>
);

davidgilbertson

<List
  items={notProducts}
  renderItem={notAProduct => (
    <p>
      {notAProduct.name}: {notAProduct.code}
    </p>
  )}
/>

davidgilbertson

<List
  items={products}
  renderItem={product => (
    <p>
      {product.name}: ${product.proice}
    </p>
  )}
/>