Untitled

// Filtering products based on name and stock availability
const filteredProducts = products.filter(product => {
    let productName = product.name.toLowerCase().indexOf(filterText.toLowerCase());
    return productName !== -1 && ((inStockOnly && product.stocked) || !inStockOnly);
});

// Categorizing filtered products
const categorizedProducts = filteredProducts.reduce((accumulator, currentProduct) => {
    if (currentProduct.category !== accumulator.lastCategory) {
        accumulator.output.push(
            <ProductCategoryRow key={currentProduct.category} category={currentProduct.category} />
        );
    }
    accumulator.output.push(<ProductRow key={currentProduct.name} product={currentProduct} />);
    accumulator.lastCategory = currentProduct.category;
    return accumulator;
}, { lastCategory: null, output: [] });

// Rendering categorized products
return (
    <div>
        {categorizedProducts.output}
    </div>
);