Higher-Order Component

hoc-ProductsWithSearch.js

import products from './products.json'

class ProductsListWithSearch extends React.PureComponent {
  state = {
    searchTerm: ''
  }
  handleSearch = event => {
    this.setState({ searchTerm: event.target.value })
  }
  render() {
    const { searchTerm } = this.state
    let filteredProducts = filterProducts(searchTerm);
    return (
      <>
        <input onChange={this.handleSearch} value={this.state.searchTerm} type="text" placeholder="Search" />
        <ProductsList products={filteredProducts} />
      </>
    )
  }
 

const filterProducts = (searchTerm) => {
  searchTerm = searchTerm.toUpperCase()
  return products.filter(product => {
    let str = `${product.title} ${product.style} ${product.sku}`.toUpperCase();
    return str.indexOf(searchTerm) >= 0;
  })
}