Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Higher-Order Component
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;
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.