React multiple filter dropdowns

Question

I have React app where you can filter a list based off a few different properties. Currently I am able to filter each category one at a time, but I'd like to filter multiple categories at once, so the list would keep getting smaller as you select more filters. Then when you clear out all the values it would go back to the original list. How can I achieve this?

demo

Sample of my code

getInitialState: function() {
  return {
    data: this.props.data,
    bender: '',
    nation: '',
    person: '',
    show: ''
  }
},
filterItems: function(val, type) {
   switch (type) {
    case 'bender':
      this.setState({bender: val});
      break;
    case 'nation':
      this.setState({nation: val});
      break;
    case 'person': 
      this.setState({person: val});
      break;
    case 'show':
      this.setState({show: val});
      break;
    default:
      break;
  }
  var filteredItems;
  if (val) {
    filteredItems = this.props.data.filter(function(item) {
      return item[type] === val;
    });
  } else {
    filteredItems = this.props.data;
  }
  this.setState({data: filteredItems});
}

foxdonut · Accepted Answer · 2015-11-09 21:49:37Z

14

Your code is filtering by just one criteria at a time. You need to loop over the four criteria and accumulate the filtering:

["bender", "nation", "person", "show"].forEach(function(filterBy) {
  var filterValue = state[filterBy];
  if (filterValue) {
    filteredItems = filteredItems.filter(function(item) {
      return item[filterBy] === filterValue;
    });
  }
});

Full code:

http://codepen.io/foxdonut/pen/GpwRJB?editors=001

I hope that is helpful!

answered Nov 9, 2015 at 21:49

foxdonut

7,9877 gold badges37 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React multiple filter dropdowns

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related