components not rendering in react-paginate

Question

I am trying to implement react pagination on local json data, using react-paginate. The buttons are clickable and the css works fine. However, any components after the first page are not being rendered. The entire page (except for the header) goes blank. The pagination buttons were the only components visible at first, but once I applied some styling to the buttons, they vanished as well (just basic styling like background colours etc). Now nothing is displayed unless I'm on the first page of cards displayed. Can you please help me with this issue?

This is my dashboard.tsx

import React, { useState } from 'react'
import logo from '../assets/logo192.png'
import courses from '../data/courses.json'
import star_on from '../assets/star_on.png'
import star_off from '../assets/star_off.png'
import next from '../assets/next.png'
import left_arrow from '../assets/left-arrow.png'
import right_arrow from '../assets/right-arrow.png'
import ReactPaginate from 'react-paginate'

function Dashboard(this: any) {

  let on = false

  const turnOn = (event: any) => {

    if (on) 
    {event.target.src = star_off
      on = false
    }
    else {
      event.target.src = star_on
      on = true
    }
 
  }

  const [cards, setCards] = useState(courses)
  const [pageNumber, setPageNumber] = useState(0)
  
  const cardsPerPage = 6
  const pagesVisited = pageNumber * cardsPerPage

  const displayCards = cards
  .slice(pagesVisited, pagesVisited + cardsPerPage)
  .map(card => {
    return (
      <div className='dashboard--card'>

      <div className='line1'>
        <div><img src ={card.image} alt ="course" className='card--image'></img></div>
        <div className='card--title'>{card.title}</div>
        <div className='card--author'>{card.author}</div>
        <div> <img  className='card--star' src={star_off} alt="star" onClick={turnOn} /></div>
        <div className='card--price'>Rs {card.price}/-</div>
        <div className='card--discounted'>Rs {card.discounted}/-</div>  
        <div className='card--cartbtn'> ADD TO CART</div>   
        <img className='card--arrow' src ={next} alt ="arrow"/>
      </div>

      <div className='line2'>
        <div className='reactbtn'>React</div>
        <div className='reactbtn'>React</div>
      </div>

  </div>
    )
  })

  const pageCount = Math.ceil(cards.length / cardsPerPage)

  const changePage = (selected: React.SetStateAction<number>) => {
    setPageNumber(selected)
  }

  
  return (
    
      <div className='dashboard--main'>
        <div className='dashboard--banner'> 
          <div className='dashboard--banner-title'>
            Discover Latest Courses on React
          </div>
          <div className='dashboard--banner-logo'>
            <img src={logo} alt ="react-logo" className='react-logo'/>
          </div>
        </div>
        <div className='dashboard--items'>
          <div className='dashboard--left'>
            <p className='dashboard--all-courses'>All courses</p>
            <div className='dashboard'>
              {displayCards}
              <div className='dashboard--paginate'>
                <ReactPaginate
                  previousLabel= {<img className='paginate--arrow-left' src ={left_arrow} alt ="prev"/>}
                  nextLabel = {<img className='paginate--arrow-right' src ={right_arrow} alt ="next"/>}
                  pageCount={pageCount}
                  onPageChange ={changePage}
                  containerClassName ={"paginationBtns"}
                  pageLinkClassName={"pageBtns"}
                  previousLinkClassName ={"prevBtn"}
                  nextLinkClassName ={"nextBtn"}
                  disabledClassName ={"disabledBtn"}
                  activeClassName ={"activeBtn"}/>
                  </div>
            </div>
          </div>
          <div className='dashboard--right'>
            hello
          </div>
      </div>
      
    </div>
  )
}

export default Dashboard

App.tsx

import React from 'react';
import Dashboard from './components/Dashboard';
import Wishlist from './components/Wishlist';
import Error from './components/Error';
import Cart from './components/Cart';
import Profile from './components/Profile';
import logo from './assets/logo.png'
import cart from './assets/cart.svg'
import profile from './assets/profile.svg'
import { BrowserRouter,Routes,Route, NavLink} from 'react-router-dom';
import './App.css';


function App() {


  return (
    <BrowserRouter>

      <nav className='navbar'>
        <li><NavLink to="/"><img className='navbar--logo' src={logo} alt ="Dashboard"/></NavLink></li>
        <div className='navbar--links'>
          <li><NavLink className="single" to="/">COURSES</NavLink></li>
          <li><NavLink className="single" to ="/wishlist">MY WISHLIST</NavLink></li>
        </div>
        <div className='navbar--icons'>
          <li><NavLink className='navbar--cart' to="/cart"><img src={cart} alt ="Cart"></img></NavLink></li>
          <li><NavLink className='navbar--profile' to="/profile"><img src={profile} alt ="profile"></img></NavLink></li>
        </div>
        
        
        
      </nav>

      <Routes>
        <Route path='/' element={<Dashboard/>}/>
        <Route path='wishlist' element={<Wishlist/>}/>
        <Route path ='cart' element={<Cart/>}/>
        <Route path ='profile' element ={<Profile/>}/>
        <Route path='*' element={<Error/>}/>
      </Routes>

     
    </BrowserRouter>
  );
}

export default App;

The other pages in App.tsx haven't been implemented yet, they only display basic components, and they they don't interfere with the working of dashboard.tsx. I don't know why the previously rendrered pagination buttons are vanishing. I have tried to inspect my code, and changed the values of the number of cards rendered per page. No matter the number, only the page is rendered. If someone has gone through this before and/or has a solution to this, that would be great.

Answer 1

I resolved the question! I hadn't destructured the 'selected' object while accessing it in my changePage function. Hope this is useful for anyone else who comes across this issue in the future