Hw12+

 avatar
user_1288612
javascript
a month ago
1.1 kB
2
Indexable
Never
import React from 'react';
import ProductCategoryRow from './ProductCategoryRow';
import ProductRow from './ProductRow';

function ProductTable(props) {
  const { products, filterText, inStockOnly } = props;

  const filteredProducts = products.filter(el =>
    (el.name.toLowerCase().includes(filterText.toLowerCase()) &&
      (inStockOnly ? el.stocked : true))
  );

  const rows = [];
  let lastCategory = null;

  const finalList = filteredProducts.reduce((a, c) => {
    if (c.category !== a.lastCategory) {
      a.output.push(<ProductCategoryRow key={c.category} category={c.category} />);
      a.lastCategory = c.category;
    }
    a.output.push(<ProductRow key={c.name} product={c} />);
    return a;
  }, { lastCategory: null, output: [] });

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

export default ProductTable;
Leave a Comment