import React, { useState, useEffect } from "react";
import { sortBy } from "../../utils/sortBy";

export default function Table(props) {
  const { data, setData } = props;
  const [rowData, setRowData] = useState([]);

  function clickSort(key) {
    setData([...rowData].sort(sortBy(key)));
  }

  const table = rowData.map((row, index) => {
    return <div key={index}>{row.name}</div>;
  });

  return (
    <div>
      <button onClick={() => clickSort("name")}>Click to sort by Name</button>
      <button onClick={() => clickSort("id")}>Click to sort by ID</button>
      {table}
    </div>
  );
}