How can I Filtering API data(response) in ReactJS?

I am working on Reactjs application, I am doing get request to render the list item with axios, data is in form of json

in response, there is array which has type purchase, refund and Adjustment, i have to make a functionality by which i can filter array with types(onClick), i have renderd list item but not able to filter according to the type given by API response, can anyone help me to sort out this issue,

this.renderTransactionSummary(txn, data) is a different function which is maping data from API to render list item

JSON RESPONSE

 "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"
            },
  ]

reactjs code

render() {
    return (<Layout t={t}>
        <div className="content">
            <div className="wrapper">
                <div className="filterWrapper">
                    <ul className="filters">
                        <li className="active"><span>{t('wallet.all')}</span></li>
                        <li><span>{t('wallet.purchase')}</span></li>
                        <li><span>{t('wallet.adjustment')}</span></li>
                        <li><span>{t('wallet.refund')}</span></li>
                    </ul>
                </div>
                <div className="summaryContainer">
                    {this.renderTxnHeader()}

                    <ul className="summaryList">
                        {/* List Items */}
                        {transaction.map((txn, key) => (
                            <li key={key} className="txnList">
                                <div className="summaryBlock">
                                    {this.renderTransactionSummary(txn, data)}
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>

            </div>
            </Layout>);
}

Image will make you clear