Untitled

import React from "react";
import ProductCategoryRow from "./ProductCateRow";
import ProductRow from "./ProductRow";
 export default function ProductTable({ products, filterText, inStockOnly }) {
  const filteredProducts = products.filter((product) => {
    const nameMatchesFilter = product.name.toLowerCase().includes(filterText.toLowerCase());
    const isInStock = !inStockOnly || (inStockOnly && product.stocked);

    return nameMatchesFilter && isInStock;
  });

  const rows = [];
  let lastCategory = null;

  filteredProducts.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>
  <thead>
    <tr>
      <th className="product-name">Name</th>
      <th className="product-price">Price</th>
    </tr>
  </thead>
  <tbody>{rows}</tbody>
</table></>;
}