please why do i see this error when adding pagination, using slice

Question

i want to add a pagenation to my product and i got an error message that looks like this :

*Unexpected Application Error! Cannot read properties of null (reading 'slice') TypeError: Cannot read properties of null (reading 'slice') at FeaturedProducts (http://localhost:3000/static/js/bundle.js:997:26) at renderWithHooks (http://localhost:3000/static/js/bundle.js:43746:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:48322:17) at beginWork (http://localhost:3000/static/js/bundle.js:49780:20) at beginWork$1 (http://localhost:3000/static/js/bundle.js:54597:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:53795:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:53709:9) at renderRootSync (http://localhost:3000/static/js/bundle.js:53678:11) at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:53087:24) at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:53333:24) *

These are my codes:

feature.js

import React, { useState } from "react";
import Card from "../Card/Card";
import "./FeaturedProducts.scss";
import useFetch from "../../hooks/useFetch";
import Pagination from "../pagination/Pagination";

const FeaturedProducts = ({ type }) => {
  const { data, loading, error } = useFetch(
    `/products?populate=*&[filters][type][$eq]=${type}`
  );

  const [currentPage, setCurrentPage] = useState(1);
  const [postPerPage, setPostPerPage] = useState(3);

  const indexOfLastPage = currentPage * postPerPage;
  const indexOfFirstPage = indexOfLastPage - postPerPage;
  const firstPage = data.slice(indexOfFirstPage, indexOfLastPage);

  // //change page function
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <div className="featuredProducts">
      <div className="top">
        <h1>{type} products</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
          suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan
          lacus vel facilisis labore et dolore magna aliqua. Quis ipsum
          suspendisse ultrices gravida. Risus commodo viverra maecenas.
        </p>
      </div>
      <div className="bottom">
        {error
          ? "Something went wrong!"
          : loading
          ? "loading"
          : firstPage.map((item) => <Card item={item} key={item.id} />)}
      </div>
      <Pagination
        postPerPage={postPerPage}
        totalPosts={data.length}
        paginate={paginate}
      />
    </div>
  );
};

export default FeaturedProducts;

pagination.js

import React from "react";

const Pagination = ({ postPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  //for loop
  for (let i = 1; i <= Math.ceil(totalPosts / postPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      <ul className="flex mx-auto items-center justify-center h-[55px]">
        {pageNumbers.map((number) => (
          <li
            key={number}
            className=" h-[40px] px-[10px] flex items-center justify-center border-[2px] border-blue-500 boreder-solid  text-black font-bold"
          >
            <button
              onClick={() => paginate(number)}
              className="h-[40px] w-full flex items-center justify-center px-[10px]  text-black font-bold"
            >
              {number}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Pagination;

Please someone should help me, why do i get slice is null?

please why do i see this error when adding pagination, using slice

0 Answers0