I am new to react js. I am trying to achieve the pagination using API response. I want re-render the data whenever I click on the next page, previous page, last_page URL. Help me to achieve the simple pagination using re-render concept.
import React, { useState, useEffect } from 'react'; import axios from '../axios'; function Transaction() { const [transactions, setTransactions] = useState([]); const [fetchUrl, setFetchUrl] = useState('default-url'); useEffect(() => { console.log(fetchUrl); async function fetchData() { const request = await axios.get(fetchUrl); setTransactions(request?.data?.payload); return request; } fetchData(); }, [setFetchUrl]); return ( <div className="wraper"> <h2>Transactions</h2> <div className="pagination"> {/* <Pagination count={transactions?.last_page_url} /> */} <button onClick={ () => setFetchUrl(transactions?.last_page_url) }>Previos Page- {(transactions?.current_page)-1}</button> <p>Current Page {transactions?.current_page}</p> <button onClick={ () => setFetchUrl(transactions?.next_page_url) }>Next Page- {(transactions?.current_page)+1}</button> <button onClick={ () => setFetchUrl(transactions?.next_page_url) }>Last Page- {(transactions?.last_page)}</button> </div> <table> <thead> <tr> <th>Id</th> <th>Quantity</th> <th>datetime</th> </tr> </thead> <tbody> {transactions?.data?.map((transaction) => ( <tr key={transaction.ID_PAYMENTS}> <td>{transaction.ID_PAYMENTS}</td> <td>{transaction.TransQuantity}</td> <td>{transaction.CardSystem}</td> </tr> ))} </tbody> </table> </div> ) } export default Transaction; Response json file
{ "success": "true", "payload": { "current_page": 1, "data": [ { "ID_PAYMENTS": "485315", "TransQuantity": "167.64999399999999", "TransSinglePriceInclSold": "59.5400", "TransAmount": "9981.8799", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 15:03:55.230", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "99000.0000", "CardOnHand": "-29240792.0000", "Mileage": "398678", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "455", "vehicle_desc": "TANKER ON CONTRACT", "LicensePlate": "MP14HC0173", "ActMilageType": "K", "ActMilageDate": "2021-03-26 15:03:55.237", "ID_CARDS": "1064", "Number": "7131", "PAN": "9100339200027713129", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "14", "terminal_desc": "AFT-FS-INDORE", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "65", "contracts_desc": "CSPL", "DateValidFrom": "2018-07-14 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485314", "TransQuantity": "60.0", "TransSinglePriceInclSold": "68.8200", "TransAmount": "1970.4000", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 15:00:29.357", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "99000.0000", "CardOnHand": "-29240732.0000", "Mileage": "1", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "1289", "vehicle_desc": "ALL BUSES", "LicensePlate": "SCPL INDORE", "ActMilageType": "K", "ActMilageDate": "2021-03-26 15:00:29.363", "ID_CARDS": "2003", "Number": "26355", "PAN": "000000000011226355=", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "8", "terminal_desc": "SANATHAL FS", "StationCode": "1", "StationName": "SANATHAL", "Active": "Y", "ID_CONTRACTS": "65", "contracts_desc": "CSPL", "DateValidFrom": "2018-07-14 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485313", "TransQuantity": "145.44000199999999", "TransSinglePriceInclSold": "59.5400", "TransAmount": "8659.5000", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:51:46.110", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32832538.0000", "Mileage": "228554", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "1143", "vehicle_desc": "DELUXE BUS(HPV)", "LicensePlate": "MP09FA9342", "ActMilageType": "K", "ActMilageDate": "2021-03-26 14:51:46.120", "ID_CARDS": "800", "Number": "6761", "PAN": "9100339200027676128", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "19", "terminal_desc": "INDORE -3209", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485312", "TransQuantity": "161.39999399999999", "TransSinglePriceInclSold": "59.5400", "TransAmount": "9609.7598", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:51:46.080", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32832376.0000", "Mileage": "279486", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "1105", "vehicle_desc": "TATA NON AC", "LicensePlate": "MP09FA9346", "ActMilageType": "K", "ActMilageDate": "2021-03-26 14:51:46.083", "ID_CARDS": "1940", "Number": "7367", "PAN": "9100339200027736724", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "19", "terminal_desc": "INDORE -3209", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485311", "TransQuantity": "95.410004000000001", "TransSinglePriceInclSold": "59.5400", "TransAmount": "5680.7100", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:43:27.843", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32832280.0000", "Mileage": "407843", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "1024", "vehicle_desc": "VOLVO", "LicensePlate": "MP04PA7290", "ActMilageType": "K", "ActMilageDate": "2021-03-26 14:43:27.863", "ID_CARDS": "1719", "Number": "7273", "PAN": "9100339200027727327", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "20", "terminal_desc": "INDORE - 5652", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485310", "TransQuantity": "103.870003", "TransSinglePriceInclSold": "68.8200", "TransAmount": "3411.0901", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:30:31.497", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "99000.0000", "CardOnHand": "-29240628.0000", "Mileage": "155496", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "1289", "vehicle_desc": "ALL BUSES", "LicensePlate": "SCPL INDORE", "ActMilageType": "K", "ActMilageDate": "2021-03-26 15:00:29.363", "ID_CARDS": "2003", "Number": "26355", "PAN": "000000000011226355=", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "8", "terminal_desc": "SANATHAL FS", "StationCode": "1", "StationName": "SANATHAL", "Active": "Y", "ID_CONTRACTS": "65", "contracts_desc": "CSPL", "DateValidFrom": "2018-07-14 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485309", "TransQuantity": "191.729996", "TransSinglePriceInclSold": "59.5400", "TransAmount": "11415.5996", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:21:47.687", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32832088.0000", "Mileage": "268681", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "753", "vehicle_desc": "TATA", "LicensePlate": "MP09FA8924", "ActMilageType": "K", "ActMilageDate": "2021-03-26 14:21:47.697", "ID_CARDS": "1565", "Number": "6321", "PAN": "9100339200027632121", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "19", "terminal_desc": "INDORE -3209", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485308", "TransQuantity": "190.35000600000001", "TransSinglePriceInclSold": "59.5400", "TransAmount": "11333.4404", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 14:04:26.503", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32831898.0000", "Mileage": "5652", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "737", "vehicle_desc": "MB INDORE", "LicensePlate": "MB 5652", "ActMilageType": "K", "ActMilageDate": "2021-03-26 14:04:26.510", "ID_CARDS": "749", "Number": "6705", "PAN": "9100339200027670527", "Cardholder": "C 2 TO MB 5652", "IsMasterCard": "N", "ID_TERMINALS": "16", "terminal_desc": "INDORE -0928", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485307", "TransQuantity": "198.070007", "TransSinglePriceInclSold": "59.5400", "TransAmount": "11793.0898", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 13:58:44.730", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32831700.0000", "Mileage": "114243", "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": "831", "vehicle_desc": "LPO1618/AC", "LicensePlate": "MP09FA8950", "ActMilageType": "K", "ActMilageDate": "2021-03-26 13:58:44.737", "ID_CARDS": "1758", "Number": "6248", "PAN": "9100339200027624821", "Cardholder": null, "IsMasterCard": "N", "ID_TERMINALS": "20", "terminal_desc": "INDORE - 5652", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" }, { "ID_PAYMENTS": "485306", "TransQuantity": "1284.459961", "TransSinglePriceInclSold": "65.8600", "TransAmount": "84594.5391", "TransArticleID": "3", "TransArticleDescription": "Diesel", "TransPollDateTime": "2021-03-26 13:35:23.070", "CardSystem": "(C) Vehicle Card (1 card)", "CardLimit": "990.0000", "CardOnHand": "-32830416.0000", "Mileage": null, "TransWasExported": "N", "ID_CUSTOMERS": "10", "Company": "CHARTERED SPEED LTD", "Firstname": null, "Lastname": "CHARTERED SPEED LTD", "Street": "SARKHEJ BAVLA HIGHWAY", "City": "AHMEDABAD, GUJARAT", "ZipCode": "382210", "ID_VEHICLES": null, "vehicle_desc": null, "LicensePlate": null, "ActMilageType": null, "ActMilageDate": null, "ID_CARDS": "1997", "Number": "2275", "PAN": "000000000011227564=", "Cardholder": "sand to indore", "IsMasterCard": "N", "ID_TERMINALS": "13", "terminal_desc": "INDORE-8587", "StationCode": "3", "StationName": "INDORE", "Active": "Y", "ID_CONTRACTS": "70", "contracts_desc": "INDORE ", "DateValidFrom": "2018-08-05 00:00:00.000", "DateValidTo": "2049-12-31 00:00:00.000" } ], "first_page_url": "default-url?page=1", "from": 1, "last_page": 7747, "last_page_url": "default-url?page=7747", "next_page_url": "default-url?page=2", "path": "default-url", "per_page": 10, "prev_page_url": null, "to": 10, "total": 77462 } } 
没有评论:
发表评论