Cant find the length of my array in react-bootstrap

Question

So I'm trying to create pagination for my react-bootstrap application. I want to access the total length of my array so I can divide it with ItemPerPage to show the related pagination number button.

For example if the array length is 10 and ItemperPage is 2 so there will be 5 pagination button from 1 to 5.

But the problem is I can't access the array length.

I tried to use object.Keys().length to get the number of length but because at the beginning of the API fetch my array is undefined it shows some error "Cannot convert undefined or null to object".

How can I do error handling for the array ? so that when first fetching the API data which is undefined it won't show error and later on when the data is fetched it can show the correct data. I tried using ternary, but the problem is not solved.

here's my code:

<Paginations
  itemPerPage= {itemPerPage}
  totalItems= {Object.keys(productList).length}
  paginate={paginate}
/>

my pagination code:

function Paginations({itemPerPage, totalItems, paginate}) {
    const pageNumbers =[];
    for (let i = 1; i <= Math.ceil(totalItems/ itemPerPage); i++ ){
      pageNumbers.push(
        <Pagination.Item key={i}>
          {i}
        </Pagination.Item>
      );
    }

  return (
    <div className="text-center">
        <Pagination onClick={( )=> paginate()}>{pageNumbers}</Pagination>
    </div>
  )
}

my Object array example:

"count": 11,
"next": "http://127.0.0.1:8000/data/products/?page=2",
"previous": null,
"results": [
        {
            "id": 7,
            "slug": "fleco-dual-usb-car-charger-cc-01",
            "sku": "FDSB01CC",
            "name": "Fleco Dual USB Car Charger CC-01",
            "description": "Fleco Dual USB Car Charger CC-01 merupakan sebuah barang yang berguna dalam mobil untuk charger",
            "weight": 20,
            "price": 50000,
            "stock": 20,
            "datetime_added": "2022-03-19T08:38:14.997244Z",
            "images": [
                {
                    "id": 3,
                    "image": "http://127.0.0.1:8000/media/products/Fleco_Dual_USB_Car_Charger_CC-01.jpg"
                }
            ],
            "brand": {
                "id": 6,
                "slug": "fleco",
                "name": "Fleco",
                "image": null
            },
            "category": {
                "id": 6,
                "slug": "charger",
                "name": "Charger",
                "image": null
            }
        },

Answer 1

With !productlist you check only if productlist is not empty or null. This should help without having to use async functionality .

<Paginations
  itemPerPage= {itemPerPage}
  totalItems= {Object.keys(!productList).length}
  paginate={paginate}
/>

Answer 2

Try this implementation 1 add productList || {} condition (productList can be undefined) 2 add useEffect hook for calculations (you can improve it by adding 0 conditions and etc) 3 use state hoke (useState) to save pageNumbers calculation result

{productList ? <Paginations
  itemPerPage= {itemPerPage}
  totalItems= {Object.keys(productList || {}).length}
  paginate={paginate}
/> : <Loading />}

function Paginations({itemPerPage, totalItems, paginate}) {
    const [itemsCount, setItemsCount] = useState(null)

    useEffect(() => {
        const pageNumbers =[];
        for (let i = 1; i <= Math.ceil(totalItems/ itemPerPage); i++ ){
          pageNumbers.push(
             <Pagination.Item key={i}>
                  {i}
              </Pagination.Item>
          );
       }

       setItemsCount(pageNumbers)
    }, [totalItems])

  return (
    <div className="text-center">
        <Pagination onClick={( )=> paginate()}>{pageNumbers} </Pagination>
    </div>
  )
}