React JS multiple filter by buttons

Question

I need help with multiple filtering array by type: income or outlay, transactions for last month and transactions with value more 1000. I have Buttons Component buttons:

<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)
},];

And Buttons

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: ''
      }];

I can not think of an algorithm for filtering the table using the function. I tried to add additional arrays, but everything worked clumsily

Muhammad Abdullah Shafiq · Accepted Answer · 2019-03-12 17:05:07Z

1

Kindly try this ::

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
    });
  }

Also i resolved your problem. here is the complete solution.

answered Mar 12, 2019 at 17:05

Muhammad Abdullah Shafiq

8646 silver badges17 bronze badges

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

Comments

will92 · Accepted Answer · 2019-03-12 17:06:03Z

0

When it comes to filtering/sorting arrays, you should make use of Array.prototype.

For example, sorting income from lowest to highest,

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

edited Mar 12, 2019 at 17:06

answered Mar 12, 2019 at 16:58

will92

1,04410 silver badges12 bronze badges

Collectives™ on Stack Overflow

React JS multiple filter by buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related