How to organize the logic of filters and search?

Question

React

There is no way I can arrange the search and filter logic in the React framework to make it work together. Tell me how to do it. Now either the filter or the search is working.

There is a component with the following functions and now it looks like this:

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

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