Untitled

const filteredProducts = products
  .filter(el => (el.name.toLowerCase().includes(filterText.toLowerCase()) && (!inStockOnly || el.stocked)))
  .reduce((acc, current) => {
    const isNewCategory = current.category !== acc.lastCategory;
    const output = isNewCategory
      ? [...acc.output, <ProductCategoryRow key={current.category} category={current.category} />]
      : acc.output;

    return {
      lastCategory: current.category,
      output: [...output, <ProductRow key={current.name} product={current} />],
    };
  }, { lastCategory: null, output: [] });

return (
  <table className="product-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>{filteredProducts.output}</tbody>
  </table>
);