Untitled

import React from 'react';
import ProductCategoryRow from './ProductCategoryRow';
import ProductRow from './ProductRow';
import products from './productsData';

export default function ProductTable({ filterText, inStockOnly }) {
  const rows = products
    .filter(product => 
      product.name.toLowerCase().includes(filterText.toLowerCase()) &&
      (product.stocked || !inStockOnly)
    )
    .map((product, index, array) => [
      index === 0 || array[index - 1].category !== product.category ? (
        <ProductCategoryRow key={product.category} category={product.category} />
      ) : null,
      <ProductRow key={product.id} product={product} />
    ])
    .reduce((acc, val) => acc.concat(val), []);

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