React

Smart Component

import React             from 'react';
import ProductTable      from './components/product-table';
import SearchBar         from './components/search-bar';
import products          from './models/products';

class FilterableProductTable extends Component {

  constructor() {
    super();

    this.handleUserInput = this.handleUserInput.bind(this);

    this.state = {
      filterText: '',
      inStockOnly: false
    }
  }

  handleUserInput(filterText, inStockOnly) {
    this.setState({
      filterText: filterText,
      inStockOnly: inStockOnly
    });
  }

  render() {
    return (
      <div>
        <SearchBar
          {...this.state}
          onUserInput={this.handleUserInput}
        />

        <ProductTable
          products={products}
          {...this.state}
        />
      </div>
    )
  }
}

Dump (function) Component

import React from 'react';
import CategoryRow from './category-row';
import ProductRow from './product-row';

export default ({products, filterText, inStockOnly}) => {

  let rows = [], lastCategory = null;

  products.map((product) => {
    if (!product.name.toLowerCase().includes(filterText.toLowerCase()) || (!product.stocked && inStockOnly)) {
      return;
    }

    if (product.category !== lastCategory) {
      rows.push(<CategoryRow category={product.category} key={product.category}/>);
    }

    rows.push(<ProductRow product={product} key={product.name}/>);
    lastCategory = product.category;

  });

  if (rows.length > 0) {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
      <tbody>{rows}</tbody>
      </table>
    );
  } else {
    return <p>\_(ツ)_/¯</p>;
  }
}