“Pagination utilisant react js” Réponses codées

Pagination utilisant react js

  const App()=>{
  //first fetch dataList from API
  const dataLists=["a","b","c","d","e","f","g"]
  
  //to calculate the pagable buttons
  const [page, setPage] = useState(0);
  
  //change currentButton value on Clicking the page number
  const [currentButton, setCurrentButton] = useState(1);
  const listsPerPage = 3;
  
  const computedActivityStreams = useMemo(() => {
    let computedData = employee_list;
    setPage(Math.ceil(computedData.length / listsPerPage));
    return computedData;
    // eslint-disable-next-line
  }, [dataLists]);
  
    //Get current lists
  const indexOfLastPost = currentButton * listsPerPage;
  const indexOfFirstPost = indexOfLastPost - listsPerPage;

  const currentActivityLists = computedActivityStreams.slice(
    indexOfFirstPost,
    indexOfLastPost
  );
  
  return(
  <>
  //inside render 
  //currentActivityLists will be pagable items
  {Array.isArray(currentActivityLists) &&
    currentActivityLists.map((data, index) => {
       return (
      //html code here
       );
     })}
  <>
  )
  
  }