Как организовать логику фильтров и поиска?

Question

[uRoot]

Я никак не могу организовать логику поиска и фильтрации в среде React, чтобы это работало совместно. Подскажите как это сделать. Сейчас работает или фильтр, или поиск.

Есть компонент со следующими функциями и сейчас это выглядит так:

export default class App extends PureComponent {

  state = {
    search: undefined,
    filters: [],
    items: [],
  };

onFilterChange () {
 // срабатывает по клику на фильтр (это чекбоксы)
 this.setState({ filters }, this.filtredInput);
}

filtredInput() {
 // фильтрует все товары согласно стейту с фильтрами
 this.setState( {items} )
}

onSearchChange() {
 // срабатывает при вводе в инпут поиска
 this.setState({ search }, this.filtredSearch )
}

filtredSearch() {
 // перебирает все айтемы
 this.setState( {items} )
}

  render() {
    return (
       // рендерим айтемы взятые из стейта (this.state.items)
       // если this.state.items пуст - рендерим все айтемы взятые из json
    )
  }

}

Answer 1

[tarthur]

https://codepen.io/gaearon/pen/LzWZvb