Custom pagination using ReactJS

Question

I have this project for pagination of json data received through an API. The problem is that my code somehow gives me a 'slice' error (it is not the case when using other API's, e.g. https://corona.lmao.ninja/v2/countries) <--- Works fine

Items.js:

import React from 'react';
import { ITEMS_PER_PAGE } from '../utils/constants';
import Data from './Data';

const Items = ({ items, page }) => {
  const startIndex = (page - 1) * ITEMS_PER_PAGE;
  const selectedItems = items.slice(startIndex, startIndex + ITEMS_PER_PAGE);
  return (
    <React.Fragment>
      {selectedItems.map(item => (
        <Data key={item.country} {...item} />
      ))}
    </React.Fragment>
  );
};

export default Items;

Data.js:

import React from 'react';

const Data = ({ Data }) => {
  const { high, low } = Data;
  return (
    <div class="data">
      <p>
        <strong>Test:</strong> {high} {low}
      </p>
      <hr />
    </div>
  );
};

export default Data;

Pagination.js:

import React from 'react';

const Pagination = ({ totalPages, handleClick, page }) => {
  const pages = [...Array(totalPages).keys()].map(number => number + 1);

  return (
    <div className="numbers">
      {pages.map(number => (
        <a
          key={number}
          href="/#"
          onClick={() => handleClick(number)}
          className={`${page === number && 'active'}`}
        >
          {number}
        </a>
      ))}
    </div>
  );
};

export default Pagination;

App.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from './components/Pagination';
import Items from './components/Items';
import { ITEMS_PER_PAGE } from './utils/constants';

const App = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    axios
      .get('https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10')
      .then(response => {
        const result = response.data;
        setItems(result);
        setTotalPages(Math.ceil(result.length / ITEMS_PER_PAGE));
        setIsLoading(false);
      });
  }, []);

  const handleClick = number => {
    setPage(number);
  };

  return (
    <div>
      <h1>Pagination Demo</h1>
      {isLoading ? (
        <div className="loading">Loading...</div>
      ) : (
        <React.Fragment>
          <Items items={items} page={page} />
          <Pagination
            totalPages={totalPages}
            handleClick={handleClick}
            page={page}
          />
        </React.Fragment>
      )}
    </div>
  );
};

export default App;

My problem seems to be something that am I missing with this other API: https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10

error: TypeError: items.slice is not a function in Items.js

Any help would be appreciated!

vuongvu · Accepted Answer · 2021-02-18 15:28:54Z

1

The response from the API has 2 nested Data keys, so it has to be like this:

const result = response.data;
setItems(result.Data.Data);

Data.js

import React from 'react';

const Data = ({ high, low }) => {

  return (
    <div class="data">
      <p>
        <strong>Test:</strong> {high} {low}
      </p>
      <hr />
    </div>
  );
};

export default Data;

demo: https://stackblitz.com/edit/react-arqaxj

edited Feb 18, 2021 at 15:28

answered Feb 18, 2021 at 13:31

vuongvu

8497 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karl Over a year ago

Thanks, but now I'm wondering how could I reach "high" and "low" attributes in that API? as you posted it: console.log(items); works fine to get all Objects, but for example console.log(items.Data.high); gives me TypeError: item.Data is undefined @vuongvu

vuongvu Over a year ago

let take a look at the response object: items is an array [ { high: ..., low: ... } ], and each item will be the object { high: ..., low: ... }. check my example again.

Karl Over a year ago

I have edited my post, can you look over to my Data.js file? I want high and low properties returned but all I get is "TypeError: Data is undefined", why is it undefined? @vuongvu

vuongvu Over a year ago

problem is here: const Data = ({ Data }) => {, Data is not a child of item so you cannot destructure it. I've updated my answer, pls check.

Collectives™ on Stack Overflow

Custom pagination using ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related