Untitled

import React from "react";
import ProductCategoryRow from "./ProductCategoryRow";
import ProductRow from "./ProductRow";

function ProductTable({ products, filterText, inStockOnly }) {
  const rows = [];
  let lastCategory = null;

  products
    .filter(product =>
      product.name.toLowerCase().includes(filterText.toLowerCase()) &&
      (!inStockOnly || (inStockOnly && product.stocked))
    )
    .forEach(product => {
      if (product.category !== lastCategory) {
        rows.push(
          <ProductCategoryRow
            category={product.category}
            key={product.category}
          />
        );
      }

      rows.push(
        <ProductRow
          product={product}
          key={product.name}
        />
      );
      lastCategory = product.category;
    });

  return (
    <table className="table">
      <thead>
        <tr>
          <th className="thTd">Name</th>
          <th className="thTd">Price</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

export default ProductTable;