Реагировать на несколько фильтров JS кнопками

Question

Мне нужна помощь с несколькими фильтрами по типу: доход или расходы, транзакции за последний месяц и транзакции со значением более 1000. У меня есть кнопки Компонентные кнопки:

<div className="buttons">
    {buttons.map(item => (
      <button
        variant="outline-primary"
        key={item.id}
        className={item.btnClass}
        type="button"
        onClick={() => {
          filterData(item.type, item.parameter, item.id);
        }}
      >
        {item.label}
      </button>

DATA

transtactions = [{
id: 0,
value: 1000,
type: 'income',
date: new Date(2018, 1, 1)},
{
id: 1,
value: 500,
type: 'outlay',
date: new Date(2019, 1, 2)
},
{
id: 2,
value: 800,
type: 'income',
date: new Date(2019, 0, 3)
},
{
id: 3,
value: 2000,
type: 'outlay',
date: new Date(2019, 1, 4)
},
{
id: 4,
value: 1000,
type: 'income',
date: new Date(2019, 1, 4)
},
{
id: 5,
value: 999,
type: 'income',
date: new Date(2019, 1, 5)
},];

А Кнопки

const buttons = [{
       id: 0,
       label: 'income',
       type: 'incomeFilter',
       parameter: 'income',
       btnClass: ''
      },
      {
      id: 1,
      label: 'outlay',
      type: 'outlayFilter',
      parameter: 'outlay',
      btnClass: ''
      },
      {
      id: 2,
      label: 'last month',
      type: 'date',
      parameter: '',
      btnClass: ''
      },
      {
      id: 3,
      label: 'more 1000',
      type: 'value',
      parameter: '1000',
      btnClass: ''
      }];

Не могу придумать алгоритм фильтрации таблицы с помощью функции. Я пытался добавить дополнительные массивы, но все работало неуклюже

Answer 1

Пожалуйста, попробуйте это ::

filterData(type, param, id) {
    let temp = [];
    if (type == 'date') {
      let today = new Date();
      for (let t of transtactions) {
        if (t.date.getMonth() == today.getMonth()) {
          temp.push(t);
        }
      }
    } else if (type == 'value') {
      for (let t of transtactions) {
        if (t.value > 1000) {
          temp.push(t);
        }
      }
    }
    this.setState({
      filteredTransactions: temp
    });
  }

Также я решил вашу проблему. здесь является полным решением.

Answer 2

Когда дело доходит до фильтрации / сортировки массивов, вы должны использовать Array.prototype .

Например, сортировка дохода по убыванию,

filterData = (type, parameter, id) => {
  const sortedArr = this.state.transtactions
                      .filter(transaction => transaction.type === type)
                        .sort(function(a, b) {return a.value - b.value});
}