Untitled

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

function ProductTable({ products, filterText, inStockOnly }) {
  let lastCategory = null;

  const rows = products
    .filter(
      (product) =>
        product.name.toLowerCase().includes(filterText.toLowerCase()) &&
        (!inStockOnly || (inStockOnly && product.stocked))
    )
    .map((product) => (
      [
        product.category !== lastCategory && (
          <ProductCategoryRow
            category={product.category}
            key={product.category}
          />
        ),
        <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.flat()}</tbody>
    </table>
  );
}

export default ProductTable;