Creating pagination in react using an api

Question

I am working on creating pagination from pagination react-js-pagination for my first time and I have been able to build the component and get the data back, displayed and functional for what it needs to do, but I receive a maximum of 500 pieces of data from my api and displaying 500 pieces of data on one page is not ideal, hence pagination. I was attempting to slice the data away from the api like so,

  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.log(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, indexOfLastTrail);

      console.log(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick={() => chooseTrail(trail.id)} className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'

and map the sliced data to be rendered. I return the mapped data and no data was being rendered and my console was still returning that I had 500 pieces of data from that sliced data. Not sure where to go from here as finding information on pagination using an api.

Here is my full component

class Trails extends Component {
  constructor(){
    super();
    this.state ={
        activePage:1,
        itemsPerPage: 20
    }
}

componentDidMount() {
axios.get(`https://www.hikingproject.com/data/get-trails? 
lat=${this.props.location.state.latitude}&lon=
${this.props.location.state.longitude}&maxDistance=150
&maxResults=500&key={API KEY}`).then((res)=> {
    console.log(res.data)
    this.props.getTrails(res.data.trails)
    }).catch(error => {
        console.log(error, 'There was an error finding the trails 
requested.')
    })
  }


handlePageChange = (pageNumber) => {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }




  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.log(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * 
this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - 
this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, 
indexOfLastTrail);

      console.log(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, 
index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick={() => chooseTrail(trail.id)} 
className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'


    return ( 
    <div className='mainTrails'>
        <div className='container'>
         {/* <div><GoogleMap /></div> */}
            <div>{mappedTrails}</div>
            <p></p>
        <div>


       <div>
           <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={20}
                totalItemsCount={this.props.trailsList.length}
                pageRangeDisplayed={5}
                onChange={this.handlePageChange}
            />
    </div> 
            </div>
        </div>
     </div>
     );
  }
}

const mapStateToProps = state => {
  return {
    trailsList: state.trailsList,
    chooseTrail: state.chooseTrail
  }
}

const mapDispatchToProps = {
  getTrails,
  chooseTrail
}

export default connect(mapStateToProps,mapDispatchToProps)(Trails);

Answer 1

I went through console logging state and found the numbers were returning correctly but once I tried to multiply them they were returning NaN. Reason being is that they were being multiplied as strings, using parseInt on them before multiplying them did the trick.

      let { trailsList, chooseTrail } = this.props;
       console.log(trailsList)

      //FOR PAGINATION
      let activePageIndex = parseInt(this.state.activePage, 10);
      let itemsPerPageIndex = parseInt(this.state.itemsPerPage, 10);


        let indexOfLastTrail = activePageIndex * itemsPerPageIndex;
        let indexOfFirstTrail = indexOfLastTrail - itemsPerPageIndex;

      let renderedTrails = trailsList.slice(indexOfFirstTrail, 
indexOfLastTrail);

      let mappedTrails = renderedTrails ?  renderedTrails.map((trail, index) => 
{
          return <div className='trailsContainer'> 
            <Link onClick={() => {chooseTrail(trail.id)}} 
className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'