React Generic List Component Implementation

  //Sample Array Data
  const sampleData = [
    { name: "Bill", score: 15 },
    { name: "Jane", score: 18 },
    { name: "Fred", score: 10 }
  ]
  
  <List data = {sampleData} onRowClick={row => console.log(row)} />

React Generic List Component v2

import React from 'react'

interface Props<T> {
  data: T[];
  onRowClick: (item: T) => void;
}

const List = <T extends object>({ data, onRowClick }: Props<T>) => {

  if(data.length === 0) return null;
  return (
    <table>
      <thead>
        Some Title/Head
      </thead>
      <tbody>
        {
        data.map((item: T, index: number) => (
          <tr key={index} onClick={() => onRowClick(item)}>
            {
            (Object.keys(data[0]) as Array<keyof T>).map(key => (
              <td key={key.toString()}>{item[key]}</td>)
            )
            }
          </tr>
        ))
        }
      </tbody>
    </table>
  );
}
export default List;