Filter

Filter.jsx

class Filter {
  render() {
    const { onChange, options } = this.props
    
    return (
      <select onChange={onChange}>
        {options.map((option) => <option value={option.value}>{option.label}</option>)}
      </select>
    )
  }
}

Parent.jsx

class Parent {
  onFilterUpdate(e) {
    const filter = e.target.value /* new_arrivals | best_sellers */
    api.getResultsWithFilter({ filter })
  }
  
  render() {
    const filterOptions = [
      {value: 'new_arrivals', label: 'new arrivals'}, 
      {value: 'best_sellers', label: 'best sellers'}, 
    ]
    
    return (
        <Filter onChange={this.onFilterUpdate.bind(this)} options={filterOptions} />
    );
  } 
}