title: How can I Filtering API data(response) in ReactJS?
body: <p>I am working on Reactjs application, I am doing get request to render the list item with <strong><code>axios</code></strong>, data is in form of json</p>
  
  <p>in response, there is array which has type <strong><code>purchase</code></strong>, <strong><code>refund</code></strong> and <strong><code>Adjustment</code></strong>, i have to make a functionality by which i can filter array with <strong><code>types(onClick)</code></strong>, i have renderd list item but not able to filter according to the <strong><code>type</code></strong> given by API response, can anyone help me to sort out this issue,</p>
  
  <p><strong><code>this.renderTransactionSummary(txn, data)</code></strong> is a different function which is maping data from API to render list item</p>
  
  <hr>
  
  <p><strong>JSON RESPONSE</strong></p>
  
  <pre><code> "transactions": [
              {
                  "amounts": 12.96,
                  "balance": 0,
                  "description": "",
                  "occurred_at": "2017-09-23T19:18:21+00:00",
                  "type": "refund"
              },
              {
                  "amounts": 12.96,
                  "balance": 0,
                  "description": "",
                  "occurred_at": "2017-09-23T19:18:21+00:00",
                  "type": "adjustment"
              },
              {
                  "amounts": 12.96,
                  "balance": 0,
                  "description": "",
                  "occurred_at": "2017-09-23T19:18:21+00:00",
                  "type": "purchase"
              },
    ]
  </code></pre>
  
  <p><strong>reactjs code</strong></p>
  
  <pre><code>render() {
      return (&lt;Layout t={t}&gt;
          &lt;div className="content"&gt;
              &lt;div className="wrapper"&gt;
                  &lt;div className="filterWrapper"&gt;
                      &lt;ul className="filters"&gt;
                          &lt;li className="active"&gt;&lt;span&gt;{t('wallet.all')}&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;{t('wallet.purchase')}&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;{t('wallet.adjustment')}&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;{t('wallet.refund')}&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className="summaryContainer"&gt;
                      {this.renderTxnHeader()}
  
                      &lt;ul className="summaryList"&gt;
                          {/* List Items */}
                          {transaction.map((txn, key) =&gt; (
                              &lt;li key={key} className="txnList"&gt;
                                  &lt;div className="summaryBlock"&gt;
                                      {this.renderTransactionSummary(txn, data)}
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          ))}
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;/Layout&gt;);
  }
  </code></pre>
  
  <p><strong>Image will make you clear</strong></p>
  
  <p><a href="https://i.stack.imgur.com/mzOEo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mzOEo.png" alt="enter image description here"></a></p>